how to use two properties with ngModel?

Question

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.

If you intend to use email as username, just leave out the username field and set it in your backend appropriately. As for the password, if you want to set password and confirmpassword with one input field, your confirmpassword field makes no sense to even be there. Use two separate fields. — bgse

Abdelaziz Mokhnache Abdelaziz Mokhnache · Accepted Answer · 2017-08-27T10:18:10

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.

how to use two properties with ngModel?

2 Answers