Компонент дочерней формы, помеченный как затронутый при загрузке, должен быть не тронут

Question

У меня есть родительский компонент формы, который использует дочерний компонент формы. Я использую угловые реактивные формы. Мои функции валидатора работают правильно, но проблема в том, что при загрузке формы дочерний компонент формы уже помечается как обработанный, что портит мои функции валидатора:

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>

Что я пробовал: Я пытался использовать ловушки жизненного цикла, такие как ngAfterViewInit (), чтобы пометить дочернюю форму formGroup как нетронутую, но ngAfterViewInit () выполняется, а затем форма загружается, а дочерняя форма formGroup по-прежнему помечается как затронутая.

Answer 1

Все, что вам нужно сделать, это передать группу форм дочернему элементу и показать эту группу в шаблоне. Так что просто пометьте как @Input и все:)

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

Тогда в детях, просто отметьте:

@Input() editUserForm_Address: FormGroup;

Также в шаблоне я бы предложил использовать get() для поля формы и hasError() для проверки ошибок в группе форм, что делает шаблон более читабельным, на мой взгляд:)

<ng-container [formGroup]="editUserForm_Address">   
  <label for="street">Address 1*</label>
  <input placeholder="Address 1" formControlName="address1">
  <div *ngIf="editUserForm_Address.get('address1').errors">
    <div [hidden]="!editUserForm_Address.hasError('required','address1')">
      Address 1 is required.
    </div>
  </div>
</ng-container>

Образец StackBlitz