角材料形成的验证错误

我有一个材料形式，其中我有一个输入框：角材料形成的验证错误

<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

角材料形成的验证错误

回答

相关问题