CODEWITHSUNDEEP
htmlangular
Amir Gh
Amir Gh

Reputation: 285

how to use two properties with ngModel?

in a form in angular 2 I filled ngModel with properties of a class. But I have 2 extra properties for example when user fill email input I want two properties get this value(email and username) and when fill password input two properties get this value(password and confirmPassword). What is the syntax of it?I tried this but it sends error:

<input [(ngModel)]="createuser.pasword;createuser.confirmPassword" name="password" type="password" minlength="6" required>

createuser is object of CreateUser:

export  class CreateUser {
mail: string;
UserName: string;
password: string;
confirmPassword: string;}

thanks a lot for your helping in a simple way.

Upvotes: 2

Views: 6311

Answers (3)

Srdjan Milic
Srdjan Milic

Reputation: 367

Actually it is possible. This, for example, works very nice, but I'm not sure is it OK to handle it this way: [(ngModel)]="address.city + ' ' + address.zipCode"

Upvotes: 0

Amir Gh
Amir Gh

Reputation: 285

After thinking a lot I found I can do like this in component of ts:

this.createuser.mail=this.createuser.UserName;
this.createuser.confirmPassword=this.createuser.pasword;

Upvotes: 0

Abdelaziz Mokhnache
Abdelaziz Mokhnache

Reputation: 4349

I don't think that Angular support binding ngModel to two properties. But accomplishing your task is possible by combining ngModel and (event) like below:

  • bind the mail property via [(ngModel)].
  • then bind the username to mail by using an input event listen.

component.html

<input type="text" [(ngModel)]="mail" (input)="setUserName($event)">
<p>
  mail {{mail}}
</p>

<p>
  username {{UserName}}
</p>

component.ts

export class CreateUser{
  mail: string;
  UserName: string;
  password: string;
  confirmPassword: string;

  constructor() { }

  setUserName(event) {
    this.UserName = event.target.value;
    // or 
    // this.UserName = this.mail;
  }
}

Although this works properly, I don't understand the necessity to use it. As it's said in the comments above you can leave a field empty then handle it properly in the backend.

Upvotes: 3

Related Questions