Многоразовые вложенные подкомпоненты в формах (встроенные компоненты) с проверкой

Демо

Вы можете поддерживать инкапсуляцию, передав FormGroup вложенному элементу управления с начальным значением и позволяя вложенному элементу управления определять свою собственную внутреннюю группу формы вместе с любыми валидаторами.

app.component.html

<nested-form-cmp 
     init = "foo" 
     [formSubmitted] = "f.submitted" 
     [grp] = "myForm">
</nested-form-cmp>

AppComponent нужно будет только инициализировать свои собственные данные формы:

export class AppComponent  {

  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
      this.myForm = fb.group({
        name: ['', Validators.required]
      })
  }

  submit(form: NgForm) {
    console.info("Reactive Form submitted: " + form.submitted);
  }
}

вложенный-form.component.html

Вложенный компонент будет отвечать за создание своей собственной вложенной FormGroup и инициализацию ее с помощью валидаторов:

<div [formGroup] = "grp">
  <div formGroupName = "innerGrp">
  <label>
    Inner name:
    <input formControlName = "name2" type = "text" id = "outer"/>   
  </label>
  <span class = "error" *ngIf = "(formSubmitted || grp.get('innerGrp.name2').touched) && grp.get('innerGrp.name2').hasError('required')">
    Inner name is required
  </span>
  </div>
</div>

вложенный-form.component.ts

export class NestedFormComponent implements OnInit{

  // The FormGroup built in the parent
  @Input() public grp: FormGroup;
  @Input() public init: string;

  // Needed, because the FormGroup does not get the forms submitted state
  @Input() public formSubmitted: boolean;
  constructor(private fb: FormBuilder){ 

  }

  ngOnInit() {
    this.grp.setControl('innerGrp', this.fb.group({
      name2: [this.init, Validators.required]
    }))
  }
}