Состав компонентов - вопрос проверки

Question

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

Вот пример проекта: https://stackblitz.com/edit/angular-material-with-angular-v5-5whzeh

Как вы можете видеть: ввод остается недействительным, но форма в целом действительна.Что я должен добавить, чтобы заставить его работать?

РЕДАКТИРОВАТЬ:

Как вы можете видеть в демонстрации: ввод недействителен, когда он не содержит текста (пусто).Это нормально.Но посмотрите на валидность формы.Он всегда действителен, полностью игнорируя правильность ввода.

Я думал, что это будет так:

Ввод: действительный, форма: действительный

Ввод: недействительный, форма: недействительный

Answer 1

Вы получаете сообщение об ошибке в консоли демонстрации stackblitz.

Ошибка: поле mat-form-field должно содержать MatFormFieldControl.Вы забыли добавить matInput к собственному элементу input или textarea?

Чтобы это исправить, просто добавьте matInput в любом месте атрибутов.Вот так:

<mat-form-field>
      <input matInput [(ngModel)]="value" name="input" #input="ngModel" name="test" 
          required placeholder="im invalid">
</mat-form-field>

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

Обновленная демоверсия