Angular：自定义 FormControl 在 FormGroup.reset() 之后不更新视图

Question

这是我的“注册”页面：

• registration.component.html

  <mat-form-field appearance="standard">
      <mat-label>First name</mat-label>
      <input matInput formControlName="firstName">
  </mat-form-field>
  
  <div formGroupName="locationGroup"
         class="location-group">
  
      <acme-location-picker formControlName="country"
                          [label]="'Country'"
                          [locations]="countries"></acme-location-picker>
  
      <acme-location-picker formControlName="city"
                          [label]="'City'"
                          [locations]="cities"></acme-location-picker>
  
  </div>
  

• registration.component.ts this.registrationForm = this.fb.group({

      firstName: ['', Validators.compose([Validators.required])],
  
      locationGroup: this.fb.group({
          country: [null, Validators.compose([Validators.required])],
          city: [null, Validators.compose([Validators.required])],
      }),
  
  });
  
  public onRegistrationFormSubmit(): void {
      this.registrationForm.reset({ onlySelf: false });
  }
  
  public showValues(): void {
      console.log('values: ', this.registrationForm.value);
  }
  

我的自定义“位置选择器”

• location-picker.component.html

  <mat-form-field appearance="standard">
      <mat-label>{{label}}</mat-label>
      <mat-select [disabled]="disabled"
        (selectionChange)="onChange($event.value)">
          <mat-option [value]="null">...</mat-option>
          <mat-option *ngFor="let location of locations"
              [value]="location.code">
              {{location.name}} ({{location.code}})
          </mat-option>
      </mat-select>
  </mat-form-field>
  

• location-picker.component.ts

  @Component({
      ...
      providers: [{
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => LocationPickerComponent),
          multi: true }]
  })
  export class LocationPickerComponent implements ControlValueAccessor {
      @Input() public label: string;
      @Input() public locations: string[];
  
      selectedOption: string;
      disabled: boolean;
      onChange = (val: any) => { };
      onTouched = () => { };
  
      writeValue(val: string): void {
          console.log('writeValue:', val);
          this.selectedOption = val ? val : null;
      }
      setDisabledState?(isDisabled: boolean): void {
          this.disabled = isDisabled;
      }          
      registerOnChange(fn: () => void): void {
          this.onChange = fn;
      }
      registerOnTouched(fn: () => void): void {
          this.onTouched = fn;
      }
  }
  

onRegistrationFormSubmit() 方法有效地重置了整个表单。
在我用 showValues() 检查表单的模型后，我可以看到 locationGroup 的所有字段都是空的。
但是，尽管调用了 writeValue 方法，但我的自定义位置选择器的 UI 不会更新（不显示三个点）。
表单的所有其他字段都重置回各自的值，除了我的自定义 formControl 字段（国家和城市垫选择）。

这是Stackblitz example。

Answer 1

在mat-select 中添加value 属性。

<mat-form-field appearance="standard">
    <mat-label>{{label}}</mat-label>
    <mat-select
      [disabled]="disabled"
      [(value)]="selectedOption"
      (selectionChange)="onChange($event.value)">
        <mat-option [value]="null">...</mat-option>
        <mat-option
        *ngFor="let location of locations"
        [value]="location.code">
        {{location.name}} ({{location.code}})
        </mat-option>
    </mat-select>
</mat-form-field>

https://stackblitz.com/edit/custom-formcontrol-update-demms9?file=src/app/location-picker/location-picker.component.html