angular - 在 Angular 8 中使用 ngModel 和 ngModelOption 进行表单验证
问题描述
我正在使用带有 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 验证以限制按钮上的表单提交?
解决方案
如果您放入相同的标签
<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>
注意:我想这不是您期望的答案,但它是这样的
推荐阅读
- c++ - C ++从按列拆分的文件中读取整数
- vue.js - VueJS:如何访问路由文件中的参数值
- react-native - 找不到导航对象。您的组件是否在导航器的屏幕内?抽屉导航器
- xcode - XCode 12.4:发生内部错误编辑功能可能受到限制
- python - 查找与线的点距离 - python
- android - 每次单击按钮时更改文本视图文本
- android - 通过 rememberSaveable State 编写的 Android Jetpack Compose 无法在后退按钮中存活
- c++ - 错误:使用未声明的标识符“实验性”
- python - 使用 biopython 从 genbank 文件中获取功能时出现 KeyError
- gnuradio - 使用 RTL 和 USRP 进行 DSB 调制/解调