html - Validarea formularului Ionic 3 [(ngModel)] și formControlName nu funcționează împreună

Vreau să validez email-ul și numărul de telefon în Ionic 3, dar este ceva în neregulă. Nu pot folosi ngModel cu validarea formularului.

aceasta este o eroare:

ngModel nu poate fi utilizat pentru a înregistra controale de formular cu o directivă părinte formGroup. Încercați să folosiți în schimb directiva parteneră a formGroup, „formControlName”.

acesta este formularul meu 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>

și acesta este un fișier .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))
 });

 }

Răspuns #1

Încearcă acest cod:

Setați [ngModelOptions] la true astfel:

[ngModelOptions]="{standalone: true}"

Sau definește-ți FormGroup astfel:

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

și în HTML eliminați proprietatea name și [(ngModel)]