Angular 中表单无效时提交有效

Question

当除国家/地区以外的所有字段均缺失时，提交按钮不会提交预期功能的表单。当我选择一个国家/地区但将其他字段留空时，表单就会提交。奇怪的错误。

组件.html：

<div class="city-edit">
  <h1>{{title}}</h1>
  <p *ngIf="this.id && !city"><em>Loading...</em></p>
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <!-- Name -->
    <mat-form-field>
      <mat-label>Name:</mat-label>
      <input matInput formControlName="name" required
             placeholder="Type a name">
      <mat-error *ngIf="this.form.controls['name'].errors?.['required']">
        Name is required.
      </mat-error>
    </mat-form-field>
    <!-- Lat -->
    <mat-form-field>
      <mat-label>Latitude:</mat-label>
      <input matInput formControlName="lat" required
             placeholder="Insert latitude">
      <mat-error *ngIf="this.form.controls['lat'].errors?.['required']">
        Latitude is required.
      </mat-error>
    </mat-form-field>
    <!-- Lon -->
    <mat-form-field>
      <mat-label>Longitude:</mat-label>
      <input matInput formControlName="lon" required
             placeholder="Insert longitude">
      <mat-error *ngIf="this.form.controls['lon'].errors?.['required']">
        Longitude is required.
      </mat-error>
    </mat-form-field>
    <!-- Country -->
    <mat-form-field *ngIf="countries">
      <mat-label>Select a Country...</mat-label>
      <mat-select id="countryId" formControlName="countryId">
        <mat-option *ngFor="let country of countries"
                    [value]="country.id">
          {{country.name}}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="this.form.controls['countryId'].errors?.['required']">
        Please select a Country.
      </mat-error>
    </mat-form-field>
    <div>
      <button mat-flat-button color="primary"
              type="submit">
        {{ this.id ? "Save" : "Create" }}
      </button>
      <button mat-flat-button color="secondary"
              [routerLink]="['/cities']">
        Cancel
      </button>
    </div>
  </form>
</div>

组件.ts：

//other code
this.form = new FormGroup({
  name: new FormControl('', Validators.required),
  lat: new FormControl('', Validators.required),
  lon: new FormControl('', Validators.required),
  countryId: new FormControl('', Validators.required)
});

onSubmit() {
  var city = (this.id) ? this.city : <City>{};
  if (city) {
    city.name = this.form.controls['name'].value;
    city.lat = +this.form.controls['lat'].value;
    city.lon = +this.form.controls['lon'].value;
    city.countryId = +this.form.controls['countryId'].value;
    if (this.id) {
      // EDIT mode
      var url = environment.baseUrl + 'api/Cities/' + city.id;
      this.http
        .put<City>(url, city)
        .subscribe(result => {
          console.log("City " + city!.id + " has been updated.");
          // go back to cities view
          this.router.navigate(['/cities']);
        }, error => console.error(error));
    }
    else {
      // ADD NEW mode
      var url = environment.baseUrl + 'api/Cities';
      this.http
        .post<City>(url, city)
        .subscribe(result => {
          console.log("City " + result.id + " has been created.");
          // go back to cities view
          this.router.navigate(['/cities']);
        }, error => console.error(error));
    }
  }
}
//other code

截图： 这有效但不提交：

这就是错误发生和表单提交的地方：

Answer 1

默认情况下，Angular 不会阻止表单无效时触发

ngSubmit

事件。由您来处理验证和表单提交逻辑。

因此，您可以尝试将

this.form.valid

放入按钮和函数中。

onSubmit() {
 if (this.form.valid) {
 }
}

在按钮上时，您可以尝试这样的事情

 <button mat-flat-button color="primary"
          type="submit" disable="!this.form.valid">
    {{ this.id ? "Save" : "Create" }}
  </button>