1

我正在使用带有 formGroup 和 formController 的 angular 8 进行验证，这在反应式和模板驱动的表单中效果很好。但是，我试图在 Angular 8 中使用带有“ngModelOptions”属性的“ngModel”（这是一个动态生成的字段）。它使用“必需”属性正确显示字段级验证，但我无法阻止按钮单击或在错误验证状态下禁用“按钮”。下面给出了一个示例代码：

<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 验证以限制按钮上的表单提交？

4

1 回答 1

1

如果您放入相同的标签 

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

“form1”是myForm，“firstName”和“lastName”不属于myForm。

如果你使用

[ngModelOptions]="{standalone: true}"

您的输入不属于任何形式。

您可以添加输入 #firstnameID="ngModel" 和 #lastnameID="ngModel" 并询问 firstnameID.valid 和 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>

注意：我想这不是您期望的答案，但它是这样的

于 2020-02-04T08:22:30.407 回答