Проверка вложенных форм в Angular 2

Question

У меня есть форма, в которой есть три компонента. Ниже приведена HTML формы:

<div class="p-r-0 m-t-1 p-r-half p-l-half"> 
    <div class="tab-content">   
     <div *ngIf="vitalsData != null"> 
      <emp-info *ngIf="far == '1'" [(dataContext)]="empData"></emp-info> 
      <emp-work *ngIf="sections == '2'" [(dataContext)]="empData"></faa-ch145> 
     </div> 
    </div> 
    <div class="right pull-top pos-relative"> 
      <button class="btn btn-primary" type="button">Reset</button> 
      <button class="btn btn-primary" type="button">Save</button> 
    </div> 
</div> 

Есть два компонента эх-инфо и ая-работа. На страницах emp-info и emp-work есть некоторые обязательные поля. Теперь, когда я сохраняю необходимые поля, необходимо проверить. Но у меня есть обязательные поля в дочернем компоненте и кнопка сохранения в родительском компоненте. Может ли кто-нибудь дать мне знать, как мы можем проверять и отображать ошибки для полей дочернего компонента.

Answer 1

Угловой Forms не проверяет внутренние компоненты компонента. Если вы хотите подтвердить, что ... emp-info | emp-work компонентов, то они должны реализовать ControlValueAccessor. Таким образом, Angular сможет работать с пользовательским компонентом (он будет полностью функциональным FormControl).

Другой вариант, который, я считаю, будет более подходящим, когда пользовательские компоненты являются просто контейнерами, - это передать экземпляр FormGroup и, таким образом, подключить внутренние элементы управления формой. Проверьте документацию ANGULAR по этой теме:

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#!#question-form-components

Обратите внимание, как DynamicFormQuestionComponent получает экземпляр FormGroup.

Answer 2

emp-work и emp-info создаются с FormControl. Затем поместите оба внутри FormGroup. Внутри фабрики объектов вы можете использовать Validators.required или любые его атрибуты.