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
– Sunil Kumar, Commented Jun 6, 2018 at 6: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. — user4676340
– user4676340, Commented Jun 6, 2018 at 6:31

Vega · Accepted Answer · 2018-06-06 06:31:23Z

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 6, 2018 at 6:31

Vega

28.8k28 gold badges121 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sunil Kumar Over a year ago

pls also check this link stackoverflow.com/questions/50699435/…

Sunil Kumar Over a year ago

not working @Vega, I have modified question and added(in Edit part) what I have changed as per your answer..

Vega Over a year ago

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 Over a year ago

What doesn't work? What do you expect? It seems to work for me: stackblitz.com/edit/angular-rktfh8

Sunil Kumar Over a year ago

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?

|

Collectives™ on Stack Overflow

Getting [Object Object] in angular application

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related