Внедрить компонент ввода в компонент формы: нет поставщика для NgForm

Question

I wi sh для ввода компонента ввода в компонент формы из верхнего компонента и проверки правильности ввода.

https://stackblitz.com/edit/angular-dynamic-template-form?file=src%2Fapp%2Fchild-input%2Fchild-input.component.ts

Но я не могу ' t связать форму с записью, чтобы форма не проверяла ввод. Или если я добавлю следующий код во входной компонент:

viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]

У меня есть эта ошибка:

Error: StaticInjectorError(AppModule)[ControlContainer -> NgForm]:
StaticInjectorError(Platform: core)[ControlContainer -> NgForm]:
NullInjectorError: No provider for NgForm!

Любая идея или другой подход?

Answer 1

Я нашел решение. Забудьте об этих провайдерах, вам нужно запросить содержимое дочерних элементов, а затем зарегистрировать входные данные в своей форме.

1. child-input.component.ts

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

@ViewChild(NgModel, { static: false }) ngModel: any;
@Input() name: string;

// your input must have the name property bound here
<input #firstnameControl="ngModel" [(ngModel)]="firstname" [name]="name" required>

parent-form.component.ts

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

@ContentChildren(ChildInputComponent) inputs: QueryList<any>;
@ViewChild('formulaire') form: NgForm;

Здесь мы получаем только входные данные типа ChildInputComponent, но если вы хотите создать более различные входные данные, тогда Вы можете создать директиву и использовать ее как селектор для входов.

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

ngAfterViewInit() {
    // iterate over the dynamic inputs
    this.inputs.forEach(input => {
         console.log(input);
         // register them into our form
         this.form.addControl(input.ngModel);
    });

    // this line is optional, use it to test and check the state of the form
    this.form.valueChanges.subscribe(console.log)
}

Использование вашей формы

Теперь, когда вы завершили эти шаги, вы можете использовать его следующим образом:

<app-parent-form>
    <app-child-input name="title">
    </app-child-input>

    <app-child-input name="email">
    </app-child-input>
</app-parent-form>

Полный пример здесь: https://stackblitz.com/edit/angular-dynamic-template-form-brp617