Angular：setErrors 不显示消息

Question

我正在尝试在我的自定义控件中显示设置错误消息，很幸运..消息总是空的！我错过了什么？ onSelectedCC(event: any)//这个调用来开启/关闭手机验证器

HTML

<div class="form-group col-xs-3 col-md-3"
                                     [ngClass]="{
                                     'has-error':(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                     !ersaForm.get('phone').valid
                                     }">

                                    <label for="phoneLabel" class="control-label">Phone</label>


                                    <input type="tel" formControlName="phone" pattern="^[0-9-+s()]*$" class="form-control" id="phoneLabel"   placeholder="Phone">

                                    <span class="help-block" *ngIf="(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                     ersaForm.get('phone').errors">
                                        <span *ngIf="ersaForm.get('phone').errors.customVal">
                                            <!--Phone Number does not exist.-->
                                        </span>

                                    </span>

TS（自定义控件有效但消息为空）

return (c: AbstractControl): { [key: string]: boolean } | null => {

        let dataForm = c.parent;
        c.setErrors(null);
         var phoneVal = "";
        if (c.value.length != 10) {    
            c.setErrors({ 'incorrect phone format': true });

            return { 'customVal': true };
        }


        if (c.value != undefined && val == -1 && val != '') {
            c.setErrors({ 'Phone Number does not exist.': true });
            return { 'customVal': true };
        };
        return null;
    };
}       

    this.ersaForm = this._fb.group({
        phone: '',

    });

onSelectedCC(event: any)//this called to turn on/off phone validator
{
    const phoneControl = this.ersaForm.get('phone');

    let cc = event.value.name;
    if (cc == '1111' )
    {
        phoneControl.setValidators([Validators.required, phoneCheck(this.customVal)]);
                }
    else {
        phoneControl.clearValidators();

    }
    phoneControl.updateValueAndValidity();
}

Answer 1

您的错误消息文本似乎已被注释掉：

<!--Phone Number does not exist.-->

试试这个：

<span class="help-block" *ngIf="(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) && ersaForm.get('phone').invalid">
   <span *ngIf="ersaForm.get('phone').hasError('customVal')">
       Phone Number does not exist
   </span>
</span>

Answer 2

您正在设置错误以形成组级别。将错误设置为单个 formControl

return (c: AbstractControl): { [key: string]: boolean } | null => {

        let dataForm = c.parent;
        c.setErrors(null);
         var phoneVal = "";
        if (c.value.length != 10) {    
            c.get('phone').setErrors({ 'incorrect phone format': true });

            return { 'customVal': true };
        }

        if (c.value != undefined && val == -1 && val != '') {
            c.get('phone').setErrors({ 'Phone Number does not exist.': true });
            return { 'customVal': true };
        };
        return null;
    };
}

Answer 3

要使错误在字段上不模糊显示，只需添加 markAsTouched ：

c.get('end').setErrors({ invalid: true });
c.get('end').markAsTouched({ onlySelf: true });