Ionic 3 表单验证 [(ngModel)] 和 formControlName 不能一起工作答案

【问题标题】：Ionic 3 Form validation [(ngModel)] and formControlName dont work togetherIonic 3 表单验证 [(ngModel)] 和 formControlName 不能一起工作
【发布时间】：2018-12-16 04:51:43
【问题描述】：

我想在 ionic 3 中验证电子邮件和电话号码，但出现了问题。我不能将 ngModel 与表单验证一起使用。

这是一个错误：

ngModel 不能用于使用父 formGroup 指令注册表单控件。尝试使用 formGroup 的合作伙伴指令“formControlName”。

这是我的 html 表单

<form  (ngSubmit)="done()" #registerForm="ngForm" [formGroup]="registerForm">
 <ion-col style="padding: 0px;" >
     <ion-item>
      <ion-input type="number" formControlName="mobileNumber"  placeholder="971000000000" name="Mobile" [(ngModel)]="register.Mobile" [brmasker]="{mask:'971000000000', len:12}" required></ion-input>
    </ion-item>
    <p *ngIf="mobileNumber.errors.pattern" class="danger" padding>Phone number is not valid.</p>

</ion-col>

<ion-col style="padding: 0px;">
    <ion-item>
      <ion-input type="text" formControlName="email"  placeholder="{{lang.Labels.Email}}" name="email" [(ngModel)]="register.email" required></ion-input>
    </ion-item>
    <p *ngIf="email.errors.pattern" class="danger" padding>Email is not valid.</p>
</ion-col>

  <div class="row row-no-padding div_right">
    <div class="col text-right">
      <button  ion-button class="submit-btn" full type="submit" [disabled]="!registerForm.form.valid">{{lang.Buttons.next}}</button>
    </div>
  </div>

这是.ts文件

 import {NgForm, FormGroup, FormControl, Validators,FormBuilder } from 
 '@angular/forms'


  mobnumPattern = "^((\\+971-?)|0)?[0-9]{10}$"; 
  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
  registerForm: FormGroup;

  constructor(private formBuilder:FormBuilder) {

 this.registerForm = new FormGroup({
  mobileNumber: new FormControl('', Validators.pattern(this.mobnumPattern)),
  email: new FormControl('', Validators.pattern(this.emailPattern))
 });

 }

【问题讨论】：

尝试：name="mobileNumber"
@PrashantPimpale 还是一样的。我应该删除 ngModel 吗？
试试检查可能会奏效
如果您想在更改 [toWayBinding] 的同时也显示 HTML 中的数据，请使用 NgModel
@PrashantPimpale 我已经检查过它不起作用。还是一样的错误

标签： html typescript ionic-framework ionic3 angular-forms

【解决方案1】：

试试这个代码：

将[ngModelOptions] 设置为true 喜欢：

[ngModelOptions]="{standalone: true}"

或者定义你的FormGroup 喜欢：

const registerForm = new FormGroup({
    mobileNumber: new FormControl('', Validators.pattern(this.mobnumPattern)),
    email: new FormControl('', Validators.pattern(this.emailPattern))
   });

并在 HTML 中删除 name 和 [(ngModel)] 属性

【讨论】：

角度版本？
角度 4，离子 3.13，Cordova 7
plucker 或 stackBlitz 会更好