如何在 Angular 10+ 中使用我的 formBuilder.group 中的两个组来验证反应式表单

Question

我需要在主 formBuilder.group 中使用两个不同的组来验证我的表单。我不知道如何得到值 'errors' 是我的 HTML [ngClass].

component.ts:

    creatFrom(): void {
    this.myForm = this.formBuilder.group({
      estimated: this.formBuilder.group({
        fieldDiff1: ['', Validators.required],
        fieldDiff2: ['', Validators.required],
        fieldDuration: [''],
        opDuration: ['', Validators.required],
        taxiInParameter: [''],
      }),
      realized: this.formBuilder.group({
        fieldDiff1: ['', Validators.required],
        fieldDiff2: ['', Validators.required],
        fieldDuration: [''],
        opDuration: [''],
        taxiInParameter: [''],
      }),
      taxiInParameter: ['', Validators.required],
    });
  }

component.html:

     <div formGroupName="estimated">
                    <div class="row">
                        <div class="form-group col-md-3" [ngClass]="{'has-error':mF.fieldDiff1.errors && isSubmited}">
                            <label class="control-label" for="estimated_fieldDiff1"><span translate>Data</span>1*:</label>
                            <ng-select 
                                id="estimated_fieldDiff1" name="estimated_fieldDiff1"
                                formControlName="fieldDiff1"
                                [items]="fieldsEstimatedData1"
                                class="select-option" required>
                            </ng-select>
                        </div>
                    </div>

Answer 1

请尝试以下

[ngClass]="{'has-error':myForm.get('estimated').get('fieldDiff1').errors && isSubmited}"

或者

在ts文件中更好地理解

get estimateForm(): FormGroup {
   return this.get('estimated');
}

get realizedForm(): FormGroup {
   return this.get('realized');
}

[ngClass]="{'has-error':estimateForm.get('fieldDiff1').errors && isSubmited}"

如何在 Angular 10+ 中使用我的 formBuilder.group 中的两个组来验证反应式表单

How validate a Reactive Form in Angular 10+ using two groups inside my formBuilder.group

html

angular

angular-reactive-forms

angular-formbuilder