Как получить правильный статус формы при использовании пользовательских форм ввода?

Question

Я использую пользовательский input в компоненте и добавляю его в родительский компонент. Все работает нормально, кроме form.status. Я просто не могу получить правильный статус, чтобы переключать button при действительном / недействительном.

Где недостающая часть, которую я должен изменить / исправить?

`<button mat-raised-button 
         name="buttonName" 
        [disabled]="!form.valid" 
        [color]="'primary'">
 </button>`

form.component.html:

<form #form="ngForm">
    <app-input [parentFormGroup]="form" 
           [label]="'e-mail'" 
           [type]="'text'"
           [name]="'User-Email'"
           [required]="true" 
           [pattern]="(email_regEx)">
    </app-input>
</form>

input.component.html

<input matInput 
       type="{{inputType}}" 
       name="{{inputName}}" 
       [(ngModel)]="model" 
       #ngForm="ngModel" 
       (ngModelChange)="modelChange.next($event)" 
       required="{{required}}" 
       pattern="{{regEx}}" 
       #{{inputName}}
>

{{ form.value | json }} -> полностью пусто, без имен полей. Должен показывать поля формы {{ form.status | json }} -> «VALID» должно быть «INVALID»

input.component.ts

export class InputComponent implements OnInit {

    public parentFormGroup: FormGroup;

    @Input('label') inputLabel: string;
    @Input('name') inputName: string;
    @Input('type') inputType: string;
    @Input('pattern') regEx: string;
    @Input() required = true;

    @Input() model: any;
    @Output() modelChange = new EventEmitter();

    constructor() {
    }

    ngOnInit() {
    }

}

Answer 1

Проблема исправлена. Я добавил ngDefaultControl в родительский компонент. Для ясности, встраивание пользовательского ввода в родительский компонент должно быть:

<form #form="ngForm">
    <app-input [parentFormGroup]="form" 
           [label]="'e-mail'" 
           [type]="'text'"
           [name]="'User-Email'"
           [required]="true" 
           [pattern]="(email_regEx)"
           ngDefaultControl>
    </app-input>
</form>

и намек был упомянут в ответе на этот вопрос :