javascript - Angular 2, sätt värde på textfält i formulär

Så jag provar lite Angular 2 och jag gillar det hittills. Men jag behöver lite hjälp för att navigera i detta nya landskap.

Jag har ett formulär för att redigera en användares detaljer och en lista på sidan med alla mina användare. När jag klickar på en av användarna i listan vill jag fylla mitt redigeringsformulär med användardetaljerna (setEditForm(user)).

Jag har fått det att fungera och allt. Men jag måste säga, det känns inte riktigt rätt att använda ngControl och ngModel samtidigt. Men kanske är det det...

Är detta det rätta sättet att göra detta eller har jag bara haft lite tur med att få det att fungera?

@Component({
  template: `
    <form (ngSubmit)="editUser(f.value)" #f="ngForm">
      <input ngControl="nameInp" [ngModel]="selectedUser.name" type="text">
      <input ngControl="ageInp" [ngModel]="selectedUser.age" type="text">
      <input ngControl="cityInp" [ngModel]="selectedUser.city" type="text">

      <button type="submit">Save</button>
    </form>
)}

export class AdminComponent {
 selectedUser:UserModel;

 constructor() {
    this.selectedUser = new UserModel;
  }

  setEditForm(user:UserModel) {
    this.selectedUser = user;
  }

  editUser(form:any) {
    // Update DB with values
    console.log(form['nameInp']);
    console.log(form['ageInp']);
    console.log(form['cityInp']);
  }
}

Svar #1

Självklart kan du använda ngControl/ngFormControl och ngModel samtidigt. Från Angular2-dokumentationen (https://angular.io/docs/ts/latest/guide/forms.html):

  • tvåvägsdatabindning med [(ngModel)]-syntax för läsning och skrivning av värden till inmatningskontroller

  • använda ngControl för att spåra ändringsstatus och giltighet hos formkontroller

  • visa valideringsfel för användare och aktivera/inaktivera formulärkontroller

  • dela information mellan kontroller med lokala mallvariabler

Kort sagt, jag skulle använda ngModel om jag behöver tvåvägsbindning och ngForm/ngFormControl om jag behöver validering, men du kan blanda båda.

Om du bara behöver få värden och notiser när inmatningsvärden uppdateras, räcker ngControl/ngFormControl`...

Båda gör det möjligt att upptäcka förändringar:

  • Händelse ngModelChange
  • Prenumerera på ctrl.valueChanges

Du kan konfigurera tvåvägsbindning för ngModel för dina formelement:

<form (ngSubmit)="editUser(f.value)" #f="ngForm">
  <input ngControl="nameInp" [(ngModel)]="selectedUser.name" type="text">
  <input ngControl="ageInp" [(ngModel)]="selectedUser.age" type="text">
  <input ngControl="cityInp" [(ngModel)]="selectedUser.city" type="text">

  <button type="submit">Save</button>
</form>

Relaterade artiklar