構建Angular2表格 - 如何包括驗證

Jecelyn Yeen對如何組織嵌套形式Angular2的excellent article條件表單域。

在她的示例中，她使用數組來顯示多個地址表單子組件，以便用戶可以無限地單擊「添加地址」，並且表單仍然會正確驗證。我想做類似的事情，但不是有一組子表單，而是根據下拉列表的值顯示不同的子表單。

我嘗試構建類似於她的代碼，除了不是返回一個表單生成器數組，我爲每個想要顯示的子表單使用一個表單組。選擇下拉選項時，我刪除不應顯示的表單組，然後重新創建應該顯示的表單組。我得到的問題是，當以這種方式構建時，父表單不會在子表單中找到更改。

守則

TS：

public showNameForm: boolean = false; 
public showAddressForm: boolean = false; 
public showPhoneNumberForm: boolean = false; 

constructor (fb: FormBuilder) { 
    this.myForm = fb.group({ 
    nameInfo: this.getNameForm(), 
    addressInfo: this.getAddressForm(), 
    phoneNumberInfo: this.getPhoneNumberForm() 
    }); 
} 

getNameForm() { 
    return this.fb.group({ 
    name: ["", Validators.required] 
    }); 
} 

getAddressForm() { 
    return this.fb.group({ 
    address1: ["", Validators.required], 
    address2: ["", Validators.required], 
    city: ["", Validators.required], 
    state: ["", Validators.required], 
    zipcode: ["", Validators.required] 
    }); 
} 

getPhoneNumberForm() { 
    return this.fb.group({ 
    phone: ["", Validators.required] 
    }); 
} 

handleDropdownSelect (value) { 
    if(value === 1) { 
    this.showNameForm = true; 

    this.myForm.controls['nameInfo'] = this.getNameForm(); 
    delete this.myForm.controls['addressInfo']; 
    delete this.myForm.controls['phoneNumberInfo']; 
    } 
    // Similar for other cases, e.g. if value is 2, only show addressInfo 
}

HTML：

<form [formGroup]="myForm"> 
    <div [formGroupName]="'nameInfo'" *ngIf="showNameForm"> 
    <input type="text" formControlName="name" /> 
    </div> 
    <!-- Similar for other fields --> 
    <!-- ... --> 
    <button [ngClass]="{disabled: !myForm.valid}">Submit</button> 
</form>

這樣做，提交按鈕時始終保持無效的，即使我鍵入所需的全部文本。檢查表單對象與Chrome的調試器，我看到myForm.value等於

{ 
    nameInfo: { 
    name: "" 
    } 
}

換句話說，我輸入到子表單組將無法得到父窗體拿起文本。但是我可以看到，myForm.controls.nameInfo確實具有正確信息的價值，而其他人被選中時也是如此。所有這些屬性都有valid財產true。但是，除非我手動撥打myForm.updateValueAndValidity()，否則父表單不會接受這些更改。這並不理想，因爲我希望表單一旦生效就顯示爲有效，而不必添加自己的事件偵聽器來實現它。

來源

2016-11-30 A. Duff

爲什麼你是否綁定了[ngClass]而不是按鈕上的[disabled]屬性？其中一個實際控制按鈕是否被禁用。另一個是基於表單有效性將一個css類應用於該按鈕。 http://plnkr.co/edit/usLejtwhMZGjyxS6InCb?p=preview – silentsod

你是對的！我道歉。我在本地看到這種情況，因爲我更新了選擇下拉列表時應該顯示的表單。我正在刪除其他表單組件，然後執行'myForm.addressInfo = this.getAddressForm（）'這是打破模板。所以我猜想真正的問題是如何選擇性地顯示子表單並使父表單正確驗證（當未顯示的表單需要空字段時，似乎會回到無效狀態，這會在他們'不顯示）。 –

IIRC禁用控件不計入驗證。通過程序禁用通過你不顯示的組上的'disable（）'應該做的。如果你想更新你的問題，如果這個工程，我會回來，並把它作爲明天的答案。 – silentsod

根據評論，問題是隱藏控件，它們仍然在計算驗證。

如果你隱藏和顯示選擇FormGroups，不希望他們對驗證或form.value財產數，那麼你可以調用disable()無論是對個人的控制或對含FormGroup：

this.myForm.addressInfo.disable(); // disables the entire addressInfo group 
// which removes it from validation, thus preventing false flags.

來源

2016-12-01 16:10:00 silentsod

構建Angular2表格 - 如何包括驗證

回答

相關問題