Компонент подформы формы с угловым шаблоном с проверкой

Question

У меня есть управляемая шаблоном форма, содержащая группу входов, содержащихся в ngFor.

Я пытаюсь отделить «подгруппу», которая повторяется в свой дочерний компонент, но у меня возникают проблемы с тем, что родительский элемент ngForm включает проверку, включенную в дочерний компонент.

Вот упрощенная версия того, что я говорю:

шаблон Родитель:

<form #parentForm="ngForm"> 
    <input name="firstName" ngModel required> 
    <input name="lastName" ngModel required> 

    <child-component *ngFor="let child of children;"></child-component> 
</form> 

Детский шаблон:

<div> 
    <input name="foo" required ngModel> 
    <input name="bar" required ngModel> 
</div> 

Я не в состоянии иметь родительская форма берет на required дочерних входах. Я попробовал, имеющий ребенка в пределах своей собственной формы и передавая экземпляр #parentForm через ребенка, и иметь ребенка вызов:

this.parentForm.addFormGroup(this.childForm.form)

, но это по-прежнему не работает.

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

Я знаю, что у меня может быть реализация субкомпонентов ControlValueAccessor, но тогда мне нужно будет реализовать пользовательский валидатор, который я бы предпочел не делать, поскольку ни одна из валидаций на самом деле не новая, это всего лишь required.

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

Answer 1

Одним из возможных решений может быть аддитивным управления от детского компонента в исходной форме следующим образом:

child.component.ts

@Component({ 
    selector: 'child-component', 
    template: ` 
    <div> 
    <input name="foo" required ngModel> 
    <input name="bar" required ngModel> 
    </div> 
    ` 
}) 
export class ChildComponent { 
    @ViewChildren(NgModel) controls: QueryList<NgModel>; 

    constructor(private parentForm: NgForm) { } 

    ngAfterViewInit() { 
    this.controls.forEach((control: NgModel) => { 
     this.parentForm.addControl(control); 
    }); 
    } 
} 

Plunker Example

Answer 2

Вы можете использовать свойство связывания и @Input для вашей проблемы, которая выглядит, как

<form #parentForm="ngForm"> 
    <input name="firstName" ngModel required> 
    <input name="lastName" ngModel required> 

    <child-component #parentForm.childForm="ngForm" [children]="children"></child-component> 
</form> 

В вашей

1. Объявите переменную ввода в

   @Input() children:any[]=[]; 
   

2. Изменить шаблон как указано ниже

   <div *ngFor="let child of children;"> 
       <input name="foo" required [(ngModel)]="child.foo"/> 
   </div>