Входные данные не учитываются при проверке формы при использовании ng-контента

Question

Учитывая следующий компонент (с селектором my-template):

<form #theForm="ngForm">
    <ng-content></ng-content>
</form>

и используйте это так:

<my-template>
    <input type="text" required name="firstName" [(ngModel)]="firstName"/>
</my-template>

Форма всегда действительна - даже если ввод неверен. Как я могу заставить это работать так, чтобы форма была недействительной, когда ввод неверен?

Демонстрационная версия: https://plnkr.co/edit/lWUe6oeBk6ccsE2JxNKb?p=preview

Answer 1

Просто для целей тестирования попробуйте изменить шаблон формы на:

<form #theForm="ngForm">
    <input type="text" required name="lastName" [(ngModel)]="lastName"/>
    <ng-content></ng-content>
</form>

Вы увидите, что эта форма становится недействительной, когда lastName является недействительным. Который означает, что FormComponent обрабатывает собственные поля элементов HTML перед ng-content оказано. Т.е. нужно обновить FormControls после того, как шаблон представлен.

Пожалуйста, прочитайте эту тему Динамическая форма для получения дополнительной информации