Angular2：Ajax 表单数据 return 空

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

因此，在组件构造中，'customer' 等于最新的一个。（所有属性都是空的）。但紧接着，我们为每个属性设置了值。

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

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

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）。

我认为我的代码是关于此功能的 'wrong'，但我不知道在哪里。

谢谢！

编辑：

我找到答案了！使用 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 样本中查看 link：https://github.com/justindujardin/ng2-material/blob/master/examples/components/input/form_builder.html

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

希望对你有帮助，蒂埃里

Angular2：Ajax 表单数据 return 空

Angular2 : Ajax form data return null

javascript

forms

formbuilder

angular