在 angular 8 中使用 ngModel 和 ngModelOption 进行表单验证

Question

我将 angular 8 与 formGroup 和 formController 一起用于验证，这在响应式和模板驱动的表单中效果很好。但是，我试图在 angular 8 中使用 "ngModel" 和 "ngModelOptions" 属性（这是一个动态生成的字段）。它使用 "required" 属性正确显示字段级验证，但我无法阻止按钮单击或在错误验证状态下禁用 "button"。示例代码如下：

<form [formGroup]="myForm" #form1="ngForm">
 <!-- few formControlName fields here -->
<mat-form-field>
   <input matInput [(ngModel)]="firstname" [ngModelOptions]="{standalone: true}" [placeholder]="First name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field>
   <input matInput [(ngModel)]="lastname" [ngModelOptions]="{standalone: true}" [placeholder]="Last name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<button mat-button [disabled]="!(form1.form.valid)">Submit</button>
</form>

尽管名字和姓氏字段为空，但提交按钮从未被禁用。我了解当您将其标记为独立时：true 这不会发生（它不会添加到 FormGroup）。但是有没有任何解决方法或其他方法可以实现 ngModel 验证以限制按钮上的表单提交？

Answer 1

if you put in the same tag

<form [formGroup]="myForm" #form1="ngForm">

"form1" is myForm, and "firstName" and "lastName" don't belong to myForm.

如果您使用

[ngModelOptions]="{standalone: true}"

your input don't belong to any form.

You can add in your inputs #firstnameID="ngModel" and #lastnameID="ngModel" and ask about firstnameID.valid and lastnameID.valid

<form [formGroup]="myForm" #form1="ngForm">
 <!-- few formControlName fields here -->
<mat-form-field>
   <input matInput [(ngModel)]="firstname" 
        #firstnameID="ngModel"
        [ngModelOptions]="{standalone: true}" 
        placeholder="First name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<mat-form-field>
   <input matInput [(ngModel)]="lastname" 
       #lastnameID="ngModel"
       [ngModelOptions]="{standalone: true}" 
       placeholder="Last name" required />
   <mat-error>This field is <strong>required</strong></mat-error>
</mat-form-field>
<button mat-button [disabled]="!(myForm.valid) ||
                               !firstnameID.valid ||
                               !lastnameID.valid">Submit</button>
</form>

NOTE: I suppose it's not the answer you expect but it's in this way

在 angular 8 中使用 ngModel 和 ngModelOption 进行表单验证

Form validations with ngModel and ngModelOption in angular 8

ngmodel

angular

angular2-form-validation