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>->“无效”必须为“无效”

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的答案中提到了提示：

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

1 个答案: