Getting [Object Object] in angular application

Question

Getting [Object Object] in angular form and also dropdown(select) not set to default 0 index. While in case of edit everything working fine. Do I need to initialize model properties for this create page?

Edit : ngModelChange not calling the function doNameChange.

Component:

  export class User {
  Id: number;
  Name: string;
  Gender: string;    
}
this.user = {
      Id: 0,
      Name: '',
      Gender: ''
}
doNameChange(event) {
    debugger;
    console.log(event); // logs model value
  }

Html:

 <form (ngSubmit)="save(f.value, f.valid)" #f="ngForm" novalidate materialize>      
      <input id="Name" (ngModelChange)="doNameChange($event)" name="Name" #Name="ngModel" type="text" class="validate form-control" required minlength="3" [(ngModel)]="user.Name">
      <select id="Gender"  name="Gender" #Gender="ngModel" class="validate form-control" [(ngModel)]="user.Gender" required>
          <option value="">-- Select Gender --</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>
    </form>

@Vega, I want to want to watch an object change.. wt to do then? — Sunil Kumar, Jun 06 '18 at 06:12
You look at the documentation for both, and chose one. And please, be more specific about your issue, because apart from the usage of both template driven forms and reactive forms, I don't see any issue in your code. — , Jun 06 '18 at 06:31

score 1 · Accepted Answer · answered Jun 06 '18 at 06:31

1

While using reactive forms, don't use ngModel which is for template based forms. If you need to listen to the changes:

ngÒnInit(){
   this.employeeForm = this._fb.group({
      EmployeeId: 0,
      Name: ['', [Validators.required, Validators.minLength(3)]],
      Gender: ['', [Validators.required]]  //dropdown
   });
   this.onChanges();
}
...

onChanges(): void {
  this.myForm.valueChanges.subscribe(val => {
        console.log(val);
  });
}

 //or:
onChanges(): void {
  this.myForm.get('name').valueChanges.subscribe(val => {
    console.log(val);
  });
}

answered Jun 06 '18 at 06:31

Vega

27,856
27
95
103

pls also check this link https://stackoverflow.com/questions/50699435/how-to-show-loader-on-each-service-call-in-angular – Sunil Kumar Jun 06 '18 at 07:04
not working @Vega, I have modified question and added(in Edit part) what I have changed as per your answer.. – Sunil Kumar Jun 06 '18 at 09:24
In my answer I suggested to remove ngModel. As for the code you pasted, it should work. What is not working? It doesn't follow the changes? Could you make a demo so I can see the rest of your class? – Vega Jun 06 '18 at 10:14
What doesn't work? What do you expect? It seems to work for me: https://stackblitz.com/edit/angular-rktfh8 – Vega Jun 06 '18 at 12:09
not printing value on console, don't know why.. Do it require any declaration or any import.. is this hello component required to in my app? – Sunil Kumar Jun 06 '18 at 13:15
m not working in app.component may be something required to import on other component.. – Sunil Kumar Jun 06 '18 at 13:42
As much I don't see your whole code, or at least [mcve], I cannot guess what's going on. Compare your code with this: https://stackblitz.com/edit/angular-rktfh8. Or fork it and update to show what's going on – Vega Jun 06 '18 at 17:44
its working, yesterday didn't work, even i cleared temp files browser cache and rebuild the code as well. Today i started my project its already working.. Thanks @Vega.. – Sunil Kumar Jun 07 '18 at 04:55

Getting [Object Object] in angular application

1 Answers1