angular开发的前端页面中Form表单有不为空验证,添加有
[formGroup]=“validateForm”
然后发现添加input输入框报错并且ngmodel失效,里面的值无法实现双向数据绑定:
<input id="appPhone" type="text" [(ngModel)]="header.phone" name="phone" nz-input autocomplete="off"
placeholder="" />
错误信息为:
接着根据提示将input输入框中的name属性换成formControlName属性:
<input
nz-input
[(ngModel)]="header.phone"
formControlName="phone"
id="phone"
(change)="PhoneReg($event)"
maxlength="11"
minlength="4">
发现报其他错:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200722165646629.png
根据提示将phone添加到fromGroup中
1.引入import { FormBuilder,FormGroup,Validators,FormControl} from ‘@angular/forms’;
2.初始化
constructor(private fb: FormBuilder) { }
3.定义一个formGroup变量,将页面中所有formControlName加进去
public validateForm: FormGroup;
this.validateForm = this.fb.group({
name: [null, [Validators.required]],
Mode: [null, [Validators.required]],
reason: [null, [Validators.required]],
type: [null, [Validators.required]],
phone: [null, [Validators.required]],
});
最后测试一下,后台没有报错也有必填验证提示: