Angular2：Ajax表單數據返回null

我想在Angular2中設置一個動態表單。因此，在我的ngOnInit函數中，我提出了一個Ajax請求來獲取帶有表單數據的JSON。像這樣：Angular2：Ajax表單數據返回null

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>

我使用[（值）]原因NG2材料包。（我已經嘗試與ngControl）。

我想我的代碼對這個功能是'錯誤的，但我不知道在哪裏。

謝謝！

編輯：

我已經找到了答案！隨着NG2的材料，我們需要設置[（值）]和[（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>

[（值）]用於由NG2的材料來設定該值'在前面'。

來源

2016-02-03 PallMallShow

是不是'農具OnInit'在類聲明中缺少？ '導出類CustomerEditComponent實現OnInit'？ –

在我目前的版本（2.0.0-beta.2）中，我們不需要實現OnInit（它沒有工作）。 – PallMallShow

哦好吧，沒有意識到在'beta.2' :) –

我認爲問題在於您沒有將您的表單輸入與其模板中ngFormControl指令中的控制器相關聯。你應該重構這樣：你爲什麼不使用customer對象，而不是一個customerForm.valuehttps://github.com/justindujardin/ng2-material/blob/master/examples/components/input/form_builder.html

否則：

<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材料樣本此鏈接？

希望它可以幫助你，蒂埃裏

來源

2016-02-03 10:28:30

嗯。我已經在所有輸入上添加了ngFormControl，但結果是一樣的。如果我不更改輸入內容，則每個屬性都爲空。而你對我的customerForm.value說得對，我現在使用customerForm（以獲得驗證錯誤等）。 – PallMallShow

爲什麼不使用'customer'對象作爲'onSubmit'方法的參數？它應該包含客戶數據;-) –

哦，我看到你的問題。使用'[（ngModel）]'而不是'[（value）]'。控制器與'ngModel'鏈接... –

Angular2：Ajax表單數據返回null

回答

相關問題