如果自动填充下拉列表，Angular 9反应性表单会跳过表单验证

Question

所以我正在为用户详细信息编写反应式表单。我有2个下拉列表，分别用于province和municipality。表单初始化后，省份字段具有*ngFor循环，并且根据选择，市政选项也将使用*ngFor加载。这是在创建新用户时，但在编辑时，我已将patchForm设置为自动选择/显示现有的省市。

在表单的编辑模式下，我尝试更改省份，这导致市政府清除现有值并加载选择。如果我没有选择直辖市，则该表格仍会有效，但是在console.log(this.form.value)上我可以看到municipality: null。

html文件

<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3">
  <div class="form-group">
    <label for="province">Province<span class="text-danger">*</span></label>
    <select id="province" class="form-control" formControlName="province" (change)="onProvinceSelect()">
       <option value="">Please Select...</option>
       <option *ngFor="let province of provinces; let i = index" [value]="province">{{ province }}</option>
    </select>
  </div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3 col-xl-3">
  <div class="form-group">
    <label for="municipality">Municipality<span class="text-danger">*</span></label>
    <select id="municipality" class="form-control" formControlName="municipality" (change)="onMunicipalitySelect()">
      <option value="">Please Select...</option>
      <option *ngFor="let municipality of municipalities" [value]="municipality.name">{{ municipality.name }}</option>
    </select>
  </div>
</div>

TS文件（初始表格-部分）

municipality: new FormControl(null, Validators.required),
province: new FormControl(null, Validators.required)

（如果表单处于编辑状态）

this.form.patchValue({
  province: 'ABC',
  municipality: 'DEF'
});

onProvinceSelect() {
  // some filtering of municipality based on province
  this.form.value.homeMunicipalityCity = null;
}

截至目前，我将此行添加到onProvinceSelect()this.form.patchValue({ homeMunicipalityCity: null });

Answer 1

您可以使用管道异步和两个可观察对象来解决。

1.-声明两个可观察对象

  province$ = this.service.getProvince();
  municipy$;

2.-创建函数以创建表单

createForm(data: any) {
    data = data || { province: null, municipy: null };
    return new FormGroup({
      province: new FormControl(data.province),
      municipy: new FormControl(data.municipy)
    });
  }

3.-创建一个返回可观察到的市政功能的函数

  listenChanges(form:FormGroup) {
    return form.get("province").valueChanges.pipe(
      distinctUntilChanged(),
      startWith(form.value?form.value.province:null),
      switchMap(res => this.service.getMunicipy(res)),
      tap((res: any[]) => {

        if (!res || !res.find(x => x == form.value.municipy))
          form.get("municipy").setValue(null);
      })
    );
  }

4.-创建表单时，使用功能listenChanges

this.form = this.createForm({ province: "b", municipy: "bb" });
this.municipy$=this.listenChanges(this.form)

。html

<form *ngIf="form" [formGroup]="form">
  Province:
  <select formControlName="province">
    <option *ngFor="let prov of province$|async" [ngValue]="prov">{{prov}}</option>
  </select>
  Municipy:
  <select formControlName="municipy">
    <option *ngFor="let prov of municipy$|async" [ngValue]="prov">{{prov}}</option>
  </select>
  </form>
  <button (click)="changeValues()">Change</button>

stackblitz

更新奖励：如何放置“正在加载..（*）

如果我们也定义主题

  loading$=new Subject<boolean>()
  loadingDebounce$=this.loading$.pipe(debounceTime(50))

我们可以使用“ tap”在“ listenChanges”功能中使用this.loading$.next(true)和this.loading$.next(false)

  listenChanges(form:FormGroup) {
    let alive=true;
    return form.get("province").valueChanges.pipe(
      distinctUntilChanged(),
      startWith(form.value?form.value.province:null),
      tap(()=>this.loading$.next(true)),
      switchMap(res => this.service.getMunicipy(res)),
      tap((res: any[]) => {
        this.loading$.next(false)
        if (!res || !res.find(x => x == form.value.municipy))
          form.get("municipy").setValue(null);
      })
    );
  }

和我们的表单类似

<form *ngIf="form" [formGroup]="form">
   Province:
   <select  *ngIf="{data:province$|async} as provinces" formControlName="province">
      <ng-container *ngIf="provinces.data">
        <option [ngValue]="null" hidden>Select one</option>
        <option *ngFor="let prov of provinces.data" [ngValue]="prov">
          {{prov}}
        </option>
      </ng-container>
      <option *ngIf="!provinces.data">Loading....</option>
   </select>
   Municipy:
   <ng-container *ngIf="{data:municipy$|async} as municipies">
      <ng-container *ngIf="{obs:loadingDebounce$ | async} as loading">
         <select formControlName="municipy">
            <ng-container *ngIf="!loading.obs">
              <option [ngValue]="null" hidden>Select one</option>
              <option *ngFor="let prov of municipies.data" [ngValue]="prov">
                {{prov}}
              </option>
            </ng-container>
            <option *ngIf="loading.obs">Loading....</option>
         </select>
      </ng-container>
    </ng-container>
</form>

（*）好，简要解释这个“扩展” *ngIf="{data:municipy|async}"。在this Yury Katkov's entry blog中对此进行了很好的解释。这种类型的if总是返回true，因为它是一个对象，有时获得值{data：null}，有时获得值{data：[.....]}，因此<ng-container>下的元素始终显示出来