Angular 8 / Material：子表單未顯示錯誤

Question

我以這種方式創建了一個帶有條件子表單的表單：

在父窗體中：

<form [formGroup]="layerFormGroup" (submit)="submit()" #f="ngForm">
  ...
  <div *ngIf="layerFormGroup.value.mode == 'features'">
    <app-edit-layer-features formControlName="modeFormGroup"></app-edit-layer-features>
  </div>

與 TS：

ngOnInit() {

  this.layerFormGroup = this.formBuilder.group({
    ...
    modeFormGroup: ['', Validators.required]
  });
}

public submit() {

  if (!this.layerFormGroup.valid) {
    return;
  }

那么子窗體是：

<ng-container [formGroup]="modeFormGroup">
<mat-horizontal-stepper>

    <mat-step label="Collection" [stepControl]="modeFormGroup">
        <mat-form-field>
            <mat-label>Collection</mat-label>
            <mat-select formControlName="collectionCtrl">
                <mat-option value="col1">col1</mat-option>
                <mat-option value="col2">col2</mat-option>
            </mat-select>
        </mat-form-field>
        <div>
            <button mat-button matStepperNext type="button">Next</button>
        </div>
    </mat-step>

    <mat-step label="Rendered geometry" [stepControl]="modeFormGroup">
        <mat-form-field>
            <mat-label>Rendered geometry</mat-label>
            <mat-select formControlName="geometryCtrl">
                <mat-option value="geoshape">a geopoint</mat-option>
                <mat-option value="geopoint">a geoshape</mat-option>
            </mat-select>
        </mat-form-field>
        <div>
            <button mat-button matStepperNext type="button">Next</button>
        </div>
    </mat-step>

</mat-horizontal-stepper>

最后是子視圖：

@Component({
selector: 'app-edit-layer-features',
templateUrl: './edit-layer-features.component.html',
styleUrls: ['./edit-layer-features.component.scss'],
providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => EditLayerFeaturesComponent),
    multi: true
  },
  {
    provide: NG_VALIDATORS,
    useExisting: forwardRef(() => EditLayerFeaturesComponent),
    multi: true
  }
]
})
// ControlValueAccessor: see https://christianlydemann.com/form-validation-with-controlvalueaccessor/
export class EditLayerFeaturesComponent implements OnInit, ControlValueAccessor, Validator {

  public modeFormGroup: FormGroup = this.formBuilder.group({
    collectionCtrl: ['', Validators.required],
    geometryCtrl: ['', Validators.required],
  });

  constructor(
    private formBuilder: FormBuilder) { }

  ngOnInit() {
  }

  public onTouched: () => void = () => { };

  writeValue(obj: any): void {
    if (obj) {
      this.modeFormGroup.patchValue(obj, { emitEvent: false });
      this.onTouched();
    }
  }
  registerOnChange(fn: any): void {
    this.modeFormGroup.valueChanges.subscribe(fn);
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    isDisabled ? this.modeFormGroup.disable() : this.modeFormGroup.enable();
  }
  validate(control: AbstractControl): import('@angular/forms').ValidationErrors {
    return this.modeFormGroup.valid ? null : { invalidForm: { valid: false, message: 'Features fields are invalid' } };
  }
  registerOnValidatorChange?(fn: () => void): void {
    this.modeFormGroup.valueChanges.subscribe(fn);
  }
}

問題如下：當我在父表單中調用 submit() 方法時，mat-error 標簽被添加到父表單中但不在子表單中，ia 驗證錯誤顯示在父表單中但不在孩子之一。

經過一些測試，我發現調用

this.modeFormGroup.markAllAsTouched()

在子表單中確實會顯示子錯誤。 無論如何，我應該從父submit()方法調用它，但我找不到如何去做（ this.layerFormGroup.get('modeFormGroup').valid不能完成這項工作）。

我覺得我遺漏了一些與材料相關的東西，有什么線索嗎？

謝謝。

編輯 1：我創建了一個 stackblitz，您可以在其中看到問題： https ://stackblitz.com/edit/angular-eldyyc。 如果您僅選擇模式 = Features並單擊save layer則只會顯示name錯誤，而不是子表單字段

Answer 1

問題在於組件之間的通信以及對原始父表單組的引用。 您看，您在父組件中創建表單組，使用modeFormGroup作為嵌套表單組，沒有任何控件。 然后您不要將layerFormGroup的引用layerFormGroup給子組件。

另一方面，在子組件中創建本地屬性modeFormGroup 。 此modeFormGroup與modeFormGroup中的layerFormGroup 。

this.layerFormGroup = this.formBuilder.group({
      name: ['', Validators.required],
      mode: ['', Validators.required],
      id: [''],
      modeFormGroup: this.formBuilder.group({})  //not the same as in the child component
});

請注意， modeFormGroup是一個空表單組，沒有任何控件。 現在，在子組件中，您將子表單組創建為：

// totally different form group
public modeFormGroup: FormGroup = this.formBuilder.group({
    collectionCtrl: ['', Validators.required],
    geometryCtrl: ['', Validators.required]
});

你需要做的是，一旦子組件初始化時，內ngOnInit()函數來發出創建表單組EventEmitter和表單組分配給modeFormGroup父窗體組控制。

我編輯了你的stackblitz