Initialize a form with values of an object with ANGULAR 4

Question

I’m having trouble creating a CRUD with Angular 4. I’m trying to create a form by putting the value of an object in it, to be able to edit it.

Following example:

<form #editar="ngForm"  (ngSubmit)="lerClientes()">
  <div>
    <label for="nome">Nome:</label>
    <input type="text" id="nome"   name="nome"  (ng-model)="cliente.nome"/>
    <label for="sobrenome">Sobrenome:</label>
    <input type="sobrenome" id="sobrenome" name="sobrenome" (ng-model)="cliente.sobrenome"/>
  </div> 
<div>
  <button type="submit"> botao</button>
  </div>>
</form>

Answer 1

Good morning, to be able to edit the values by Typescript you need to change the (ng-model)="cliente.nome" for [(ng-model)]="cliente.nome", because the property between the [] is just a GET to be able to set needs of the (), so you will use the two-way bind, if you want to use for the other inputs you want to change to pick up the value in typescript, I forgot to mention, to appear directly in the form, it is necessary to put in typescript. For example in the constructor put:

cliente.nome = "Rogério";
cliente.sobrenome = "Almeira";

And with the [(ng-model)] in the HTML as soon as it is changed the value will already be saved in the variable.

Answer 2

export class AppCtorComponent {
  title: string;
  myHero: string;

  constructor() {
    this.title = 'Tour of Heroes';
    this.myHero = 'Windstorm';
  }
}