角材料形成的驗證錯誤

我有一個材料形式，其中我有一個輸入框：角材料形成的驗證錯誤

<md-form-field class="input-full-width"> 
    <input mdInput class="form-control emp-info-input" type="text" placeholder="Description" formControlName="periodDesc"> 
    <md-error *ngIf="periodDesc.errors.required">This field is required</md-error> 
</md-form-field>

Formbuilder：

this.apprperiod = this.fb.group({ 
     'periodDesc' : new FormControl(this.periodDesc, [Validators.required,Validators.maxLength(50)]) 
    }, {validator: CustomValidator.validate});

我收到以下錯誤而載入：

ERROR TypeError: Cannot read property 'hasError' of undefined
at Object.TestComponent._co [as updateDirectives] (test.html:33)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075)
at checkAndUpdateView (core.es5.js:12255)
at callViewAction (core.es5.js:12620)
at execComponentViewsAction (core.es5.js:12552)
at checkAndUpdateView (core.es5.js:12261)
at callViewAction (core.es5.js:12620)
at execEmbeddedViewsAction (core.es5.js:12578)
at checkAndUpdateView (core.es5.js:12256)
at callViewAction (core.es5.js:12620)

來源

2017-09-12 HBK

這是因爲fi加載時，eld.errors尚未設置。我用'* ngIf =「！periodDesc.valid」'解決了這個問題 – Swoox

因爲你必須從這樣的形式獲得控制：

<md-error *ngIf="apprperiod.get('periodDesc').errors.required">This field is required</md-error>

或者

<md-error *ngIf="apprperiod.hasError('required', ['periodDesc'])">This field is required</md-error>

來源

2017-09-12 11:38:58 trichetriche

您可以創建一個在您component的方法來檢查狀態和驗證領域FormGroup：

checkInvalidTouched(field: string) { 
    return (
     !this.apprperiod.get(field).valid && 
     (this.apprperiod.get(field).touched || this.formulario.get(field).dirty) 
    ); 
} 

checkCustomValidator() { 
    const formField = this.formulario.get('periodDesc'); 
    if (formField.errors) { 
     return formField.errors['customValidator'] && checkValidTouched('periodDesc'); 
    } 
}

然後用這個方法子句*ngIf：

<md-form-field class="input-full-width"> 
    <input mdInput class="form-control emp-info-input" type="text" placeholder="Description" formControlName="periodDesc"> 
    <md-error *ngIf="checkIfRequired('periodDesc')">This field is required.</md-error> 
    <md-error *ngIf="checkCustomValidator('periodDesc')">Custom validator return error.</md-error> 
</md-form-field>

來源

2017-09-12 11:48:32

角材料形成的驗證錯誤

回答

相關問題