在 angular 应用程序中获取 [对象对象]

Question

在 angular 表单中获取 [Object Object] 并且下拉列表 (select) 未设置为默认 0 索引。在编辑一切正常的情况下。我需要为此创建页面初始化模型属性吗？

Edit : ngModelChange 没有调用函数 doNameChange.

分量：

  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>

Answer 1

在使用响应式表单时，不要使用用于基于模板的表单的 ngModel。如果你需要听变化：

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);
  });
}

在 angular 应用程序中获取 [对象对象]

Getting [Object Object] in angular application

angular

angular5

angular-forms

angular-formbuilder