ngFormModel in ionic2

Question

如何在ionic2中綁定ngFormModal？我想在我的網頁導入ngFormModal，但我得到這個錯誤：

Uncaught (in promise): Template parse errors: 
Can't bind to 'ngFormModel' since it isn't a known native property (" 

有人能告訴我如何在ionic2 beta.37版本正確綁定ngFormModal？我想我已經導入了所有相關的依賴關係（請參閱我的評論以獲取更多詳細信息）。即使我更新了離子版本，問題仍然存在。

HTML：

<form [ngFormModel]="registrationForm"> 

<ion-list class="lis1"> 
     <ion-row> 
     <ion-item width-50 > 
      <ion-label floating >First Name</ion-label> 
      <ion-input type="text" [(ngModel)]="firstName" ngControl="first" ></ion-input> 
     </ion-item> 

     <ion-item width-50 > 
      <ion-label floating>Last Name</ion-label> 
      <ion-input type="text" [(ngModel)]="lastName" ngControl="last" ></ion-input> 
     </ion-item> 
     </ion-row> 

     <ion-item> 
     <ion-label floating>Email</ion-label> 
     <ion-input type="email" [(ngModel)]="email" ngControl="email" ></ion-input> 
     </ion-item> 
</ion-list> 
</form> 
<ion-footer> 
    <ion-toolbar> 
    <button primary full (click)="register()" >Register</button> 
    <p>{{regMsg}}</p> 
    </ion-toolbar> 
</ion-footer> 

打字稿：

import {FormBuilder, ControlGroup, Validators, NgFormModel} from '@angular/common'; 
public registrationForm: any; 

constructor(private navCtrl: NavController, private persistence: AutoSparesPersistence, 
    private rest: Rest, private logger: Logger, private user:Users,public _form: FormBuilder) { 
this.registrationForm = this._form.group({ 
     "email":["",Validators.compose([Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')])], 
     "date":["",Validators.required], 
     "first":["",Validators.compose([Validators.maxLength(64),Validators.required])], 
     "last":["",Validators.compose([Validators.maxLength(64),Validators.required])], 
     "payment":["",Validators.required], 
     "phone":["",Validators.compose([Validators.maxLength(10),Validators.minLength(10) , Validators.required])], 
     "categ":["",Validators.required], 
     "company":["",Validators.compose([Validators.maxLength(64),Validators.required])], 
     "tgNo":["",Validators.required], 
     "num1":["",Validators.compose([Validators.maxLength(10),Validators.required])], 
     "fax":["",Validators.compose([Validators.maxLength(12),Validators.minLength(12),Validators.required])], 
     "addr":["",Validators.compose([Validators.maxLength(64),Validators.required])], 
     "trc":["",Validators.compose([Validators.maxLength(64),Validators.required])], 
     "state":["",Validators.required], 
     "country":["",Validators.required], 
     "pin":["",Validators.compose([Validators.maxLength(6),Validators.minLength(6),Validators.required])] 




     }) 

    } 

Answer 1

我試着模式驅動程序能正常工作對我來說

<ion-content padding class="has-header"> 
    <form #form="ngForm" (ngSubmit)="logForm(form)" novalidate> 
     <ion-item> 
      <ion-label style="color: black;" fixed>User Name</ion-label> 
      <ion-input type="text" name="username" ngModel #userName="ngModel" required pattern="[A-Za-z0-9]{3}"></ion-input> 
     </ion-item> 
     <p *ngIf="userName.errors?.required && userName.touched"> 
      Name is required 
     </p> 
     <p *ngIf="userName.errors?.pattern && userName.touched"> 
      Not valid 
     </p> 
     <button [disabled]=!form.valid style="text-transform: none" ion-button type="submit" value="Submit" block>Submit</button> 
     <!--p *ngIf="!form.valid" style="text-align: center; color: red;" >Enter all data correctly</p--> 
    </form> 
</ion-content> 

這可能會幫助別人

Answer 2

HTML：

<form [formGroup]="registrationForm"> 
     <input formControlName="input1" [(ngModel)]="username" /> 
      <-- Your other form inputs --> 
    </form> 

打字稿：

import { FormGroup, FormBuilder } from '@angular/forms'; 

registrationForm: FormGroup; 
username: string; 

constructor(private fb: FormBuilder) { } 

ngOnInit() { 
     this.registrationForm = this.fb.group({ 
      input1: [] 
     }); 
    } 

這對於創建形式和ionic2訪問它/ Angular2