Angular2：Ajax 表单数据返回 null

Question

我正在尝试在 Angular2 中设置动态表单。 因此，在我的 ngOnInit 函数中，我发出了一个 Ajax 请求以获取带有表单数据的 JSON。 像这样：

export class CustomerEditComponent{
  private customer : Customer = new Customer();
  private customerForm;

  constructor(private _CustomersService: CustomersService, private _routeParams: RouteParams, private _fb: FormBuilder){
    this.customerForm = _fb.group({
      name: [],
      job: [],
      arrival_date: []
    });
  }

  ngOnInit(){
    let id = this._routeParams.get('id');
    this._CustomersService.getById(id).subscribe(res => {
      this.customer = res;
    });
  }

  onSubmit(event){
    console.log(event);
  }
}

因此，在组件构造中，“客户”等于最新的。 （所有属性都是空的）。但就在之后，我们为每个属性设置了值。

没问题，我的输入值正确。

但是，如果我提交表单，则表单值等于：

Object {name: null, job: null, arrival_date: null}

（但视图中的表单已正确填充）。

这是我的表格（精简版）：

<form [ngFormModel]="customerForm" (ngSubmit)="onSubmit(customerForm.value)">
  <input md-input [(value)]="customer.name">
  <input md-input [(value)]="customer.job">
  <input md-input type="date" [(value)]="customer.arrival_date">

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

我使用 [(value)] 导致 ng2-material 包。 （我已经尝试过使用 ngControl）。

我认为我的代码关于此功能的“错误”，但我不知道在哪里。

谢谢！

编辑：

我找到了答案！ 使用 ng2-material，我们需要在每个输入上同时设置 [(value)] 和 [(ngModel)]，如下所示：

<form [ngFormModel]="customerForm" (ngSubmit)="onSubmit(customerForm)">
  <input md-input [(value)]="customer.name" [(ngModel)]="customer.name">
  <input md-input [(value)]="customer.job" [(ngModel)]="customer.job">
  <input md-input type="date" [(value)]="customer.arrival_date" [(ngModel)]="customer.arrival_date">

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

[(value)] 被 ng2-material 用来设置值'on front'。

Answer 1

我认为问题在于您没有在模板中的 ngFormControl 指令中将表单输入与其控制器相关联。你应该这样重构：

<form [ngFormModel]="customerForm" (ngSubmit)="onSubmit(customerForm.value)">
  <input md-input [(value)]="customer.name" 
     ngFormControl="name">
  <input md-input [(value)]="customer.job"
     ngFormControl="job">
  <input md-input type="date" [(value)]="customer.arrival_date"
     ngFormControl="arrival_date">

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

从 ng2-material 示例中查看此链接：https://github.com/justindujardin/ng2-material/blob/master/examples/components/input/form_builder.html

否则为什么不使用customer 对象而不是customerForm.value 呢？

希望对你有帮助 蒂埃里