typescript - Angular: setErrors visar inte meddelande

Jag försöker visa ett inställt felmeddelande i min anpassade kontroll utan framgång... meddelandet är alltid tomt! Vad missar jag? onSelectedCC(event: any)//detta kallas för att slå på/av telefonvalideraren

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(anpassad kontroll fungerar men meddelandet är tomt)

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();
}

Svar #1

Det ser ut som att din felmeddelandetext är utkommenterad:

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

Prova detta:

<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>

Svar #2

för att få felet att visas utan suddighet på fältet, lägg bara till markAsTouched :

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

Relaterade artiklar