反应式表单的验证器未从父表单组件传递到子组件答案

【问题标题】：Validators for reactive form not passing from parent form component to child component反应式表单的验证器未从父表单组件传递到子组件
【发布时间】：2019-03-04 22:22:50
【问题描述】：

我有一个使用子表单组件的父表单组件。我正在使用 Angular 反应形式。我在子表单组件中设置值没有问题，但验证器不再工作。在父表单中，我已经实例化了类似于以下的表单组：

this.editUserForm = this.fb.group ({
  phone: ['123-456-1234'],
  fax: [null],
  email: [null],
  website: [null],
  editUserForm_Address : this.fb.group ({
    address1: ['123 Elm Street', Validators.required],
    address2: [null],
    city: ['Dummy City', Validators.required],
    state: ['Dummy State', Validators.required],
    zipcode: ['11111', Validators.required],
    country: ['USA', Validators.required]
  })
});

父组件html使用子组件：

<form [formGroup] = "editUserForm">
<address-form formGroupName = "editUserForm_Address"></address-form>
</form>

子组件类是这样的：

export class AddressFormComponent implements OnInit {

  public addressFormGroup: FormGroup;

  @Input()

  constructor(private controlContainer: ControlContainer) { }

  ngOnInit() {
    this.addressFormGroup = <FormGroup>this.controlContainer.control;
  }

}

子组件html是这样的（仅以地址1为例）：

   <ng-container [formGroup] = "addressFormGroup">   
    <div class = "row">
     <div class = "form-group col-12" [ngClass]="{'error': (addressFormGroup.controls['address1'].errors)">
       <label for="street" >Address 1*</label>
       <input placeholder = "Address 1" class="form-control" formControlName="address1">
       <div *ngIf="(addressFormGroup.controls['address1'].errors)" class="error-msg">
        <div [hidden]="!addressFormGroup.controls['address1'].errors.required"
 class = "input_feedback">Address 1 is required.</div>
       </div>
     </div>

我对显示的值没有任何问题，例如地址 1 的“123 Elm Street”。但是，验证器不再像以前那样工作，因为一切都只是在父表单中。我也尝试使用 setValidators() 方法设置验证器，但没有成功。

【问题讨论】：

事实证明这不是我的验证器的问题。验证器顺利通过。我有一些输入装饰器设置不正确，我在条件语句中使用了它们和我的验证器，所以我认为这是验证器的问题是我的错误。现在我的问题是子表单组件的状态设置为在加载时触摸。

标签： angular angular-reactive-forms

【解决方案1】：

我不确定确切的问题是什么，但我能够在 StackBlitz 上重新创建您的表单，并且验证按预期工作。

我所做的只是将editUserForm_Address formGroup 传递给子组件。

StackBlitz 在这里工作 -> https://stackblitz.com/edit/angular-pbfuut

<form [formGroup] = "editUserForm">
  <address-form [formGroup]="editUserForm.get('editUserForm_Address')"></address-form>
</form>

关键是将实际的formGroup 传递给子组件-> [formGroup]="editUserForm.get('editUserForm_Address')"

【讨论】：

它最终成为一些输入装饰器的问题，我没有在子组件类中正确定义，但非常感谢您的示例！我在为子组件设置表单组时也遇到了问题，您的回答有所帮助。