【解决】angular中FromGroup表单内的input输入框ngModel失效且后台报错问题

      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]],
});
最后测试一下，后台没有报错也有必填验证提示：