使用自定义输入表单时如何获得正确的表单状态？

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}}
>

<pre>{{ form.value | json }}</pre> - >完全空，没有字段名称。必须显示表单字段<pre>{{ form.status | json }}</pre> - >“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>

并且在this question的答案中提到了提示：