Angular 加载时标记为已接触的子窗体组件-需要保持不变

Angular 加载时标记为已接触的子窗体组件-需要保持不变,angular,reactive,Angular,Reactive,我有一个使用子窗体组件的父窗体组件。我用的是角度反应形式。我的验证器功能工作正常,但问题是,当表单加载时,子表单组件已标记为已触动,这会弄乱我的验证器功能: this.editUserForm = this.fb.group ({ phone: ['123-456-1234'], fax: [null], email: [null], website: [null], editUserForm_Address : this.fb.group ({ address1:

我有一个使用子窗体组件的父窗体组件。我用的是角度反应形式。我的验证器功能工作正常,但问题是,当表单加载时,子表单组件已标记为已触动,这会弄乱我的验证器功能:

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;
  }

}
导出类AddressFormComponent实现OnInit{
公共地址FormGroup:FormGroup;
@输入()
构造函数(私有controlContainer:controlContainer){}
恩戈尼尼特(){
this.addressFormGroup=this.controlContainer.control;
}
}
子组件html如下所示(仅以地址1为例):


地址1*
地址1是必需的。
我所尝试的:
我尝试过使用生命周期挂钩,例如ngAfterViewInit()将子表单组标记为未触及,但是ngAfterViewInit()执行,然后加载表单,子表单组仍然标记为已触及。

您需要做的就是将表单组传递给子表单组,并在模板中显示该表单组。所以只要标记为
@Input
,就是这样:)


真管用!我不知道为什么,但似乎将formgroup作为ControlContainer传递给孩子是导致问题的原因,尽管我不是100%。我尝试使用@Input()传递formgroup,正如您所描述的那样,这解决了我的问题。子窗体不再默认为已触摸。非常感谢你!
   <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>