Angular 如何访问反应式表单控件嵌套组件的控件？

Question

我的问题是，如何访问 exampleForm 的 FormControl 'moreFields' 的状态？ 我的问题是我看不到 FormControl 'moreFields' 的控件 所以看下面的代码sn-ps，不明白为什么看不到表单控件，例如exampleForm.get('moreFields').get(fieldone)

这是示例表单模板的一部分：

<form class="form-border spacer-vertical" [formGroup]="exampleForm" (ngSubmit)="onSubmit(exampleForm)" autocomplete="off" novalidate>
    <more-fields-component formControlName="moreFields"></more-fields-component>
        <button class="btn btn-primary" type="submit" [disabled]="exampleForm.invalid">Submit</button>
</form>

这里是示例表单代码 sn-ps，它包含一个名为 moreFields 的字段，它是一个反应式表单组件：

  ngOnInit() {
    this.exampleForm = this.fb.group({
      moreFields: [null]
    });

    this.exampleForm.get('moreFields').valueChanges.subscribe((value: IMoreFields) => {
      console.log('MoreFields model changed ' + JSON.stringify(value));
    });
  }

这里是 MoreFieldsComponent 的模板，它包含两个字段：

<form [formGroup]="moreFieldsForm" (ngSubmit)="onDone(moreFieldsForm)" autocomplete="off" novalidate>
  <div class="more-fields-layout">
    <div class="form-group">
      <label class="text-primary">Field One
        <span class="warning-text">*</span>
      </label>
      <input class="spacer-horizontal" type="text" formControlName="fieldone">
        <div class="text-danger" 
          *ngIf="(extractFormControl('fieldone').touched && extractFormControl('fieldone').invalid) || 
          (extractFormControl('fieldone').dirty && extractFormControl('fieldone').invalid)">
          <p *ngIf="extractFormControl('fieldone').errors.required">Field one required!</p>
          <p *ngIf="extractFormControl('fieldone').errors.minlength">Field one must be greater the min {{ extractFormControl('fieldone').errors.minlength.requiredLength }} 
            characters long, the actual length is {{ extractFormControl('fieldone').errors.minlength.actualLength}} characters!</p>
          <p *ngIf="extractFormControl('fieldone').errors.maxlength">Field one must be less than {{ extractFormControl('fieldone').errors.maxlength.requiredLength }} 
            characters long, the actual length is {{ extractFormControl('fieldone').errors.maxlength.actualLength}} characters!</p>
        </div>
    </div>
    <div class="form-group">
      <label class="text-primary">Field Two
        <span class="warning-text">*</span>
      </label>
      <input class="spacer-horizontal" type="text" formControlName="fieldtwo">
        <div class="text-danger" 
          *ngIf="(extractFormControl('fieldtwo').touched && extractFormControl('fieldtwo').invalid) || 
          (extractFormControl('fieldone').dirty && extractFormControl('fieldone').invalid)">
          <p *ngIf="extractFormControl('fieldtwo').errors.required">Field two required!</p>
          <p *ngIf="extractFormControl('fieldtwo').errors.minlength">Field two must be greater the min {{ extractFormControl('fieldtwo').errors.minlength.requiredLength }} 
            characters long, the actual length is {{ extractFormControl('fieldtwo').errors.minlength.actualLength}} characters!</p>
          <p *ngIf="extractFormControl('fieldtwo').errors.maxlength">Field two must be less than {{ extractFormControl('fieldtwo').errors.maxlength.requiredLength }} 
            characters long, the actual length is {{ extractFormControl('fieldtwo').errors.maxlength.actualLength}} characters!</p>
        </div>
    </div>
  </div>
</form>

这里是 MoreFieldsComponent 的代码 sn-ps，有两个字段：

isDisabled = false;
  private fieldoneValidators = [];
  ngOnInit() {  
    this.moreFieldsForm = this.fb.group({
      fieldone: [{ value: null, disabled: this.isDisabled }],
      fieldtwo: [{ value: null, disabled: this.isDisabled }]
    }, 'submit';
    this.setupValidators(); 
    ...
  }


  setupValidators() {
      this.fieldoneValidators = [];
        this.fieldoneValidators.push(Validators.required);
        this.fieldoneValidators.push(Validators.minLength(5));
        this.fieldoneValidators.push(Validators.maxLength(20));
      }
      const fieldOnFormControl = this.complexNameForm.get('fieldone');
      fieldOneFormControl.setValidators(this.fieldoneValidators);
      fieldOneFormControl.updateValueAndValidity();

     ...

  } 


  extractFormControl(controlName: string): FormControl {
    return <FormControl>this.moreFieldsForm.get(controlName);
  }

Answer 1

你可以试试

this.exampleForm.get('moreFields.fieldone');