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中访问它的示例代码

离子2中的ngFormModel

2 个答案: