CODEWITHSUNDEEP
angulartypescriptionic2
balaji
balaji

Reputation: 175

ngFormModel in ionic2

How do you bind ngFormModal in ionic2? I am trying to import ngFormModal in my page, but I got this error: 

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

Can someone show me how to bind ngFormModal properly in ionic2 beta.37 version? I think I have imported all relevant dependencies (see my comments for more details). Even when I updated my ionic version, the problem persisted.

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>

TypeScript:

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])]




      })

  }

Upvotes: 1

Views: 419

Answers (2)

harinim
harinim

Reputation: 11

HTML: 

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

Typescript:

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

registrationForm: FormGroup;
username: string;

constructor(private fb: FormBuilder) { }

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

This is the sample code for creating form and accessing it in ionic2/Angular2

Upvotes: 0

Yokesh Varadhan
Yokesh Varadhan

Reputation: 1636

I tried modal driven process this works fine for me

<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>

this may help someone

Upvotes: 1

Related Questions