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

因此，在组件构造中，＆＃39;客户＆＃39;等于最新的。（所有属性都是空的）。但就在之后，我们为每个房产设定价值。

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

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

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>

我使用[（值）]导致ng2-material包。（我已经尝试使用ngControl了。）

我认为我的代码是错误的＆＃39;关于这个功能，但我不知道在哪里。

谢谢！

编辑：

我找到了答案！使用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用于设置前面的值＆＃39;。

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 samples中的此链接：https://github.com/justindujardin/ng2-material/blob/master/examples/components/input/form_builder.html

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

希望它可以帮到你，亨利

Angular2：Ajax表单数据返回null

1 个答案: