Error messages on form validation with nativescript-textinputlayout

plugins

#1

Hi, I’m trying to display error messages on form validations. My idea is as follows: every time the user types something in the TextField I want it to check if the field is valid (I’m using reactive forms), if it’s not valid, then the errorEnabled from nativescript-textinputlayout is set to true, thus showing the error message.

This is my template code:

    <TextInputLayout id="firstname" errorEnabled="false" hint="Nombre" counterEnabled="true" hint="Nombre" error="Campo requerido">
        <TextField formControlName="firstname" (textChange)="isValid(registerForm.get('firstname'), firstname)"></TextField>
    </TextInputLayout>

    <TextInputLayout hint="Apellido" counterEnabled="true" error="Campo requerido" errorEnabled="false">
        <TextField formControlName="lastname" horizontalAlignment="stretch" (textChange)="isValid(registerForm.get('lastname'), lastname)"></TextField>
    </TextInputLayout>

    <TextInputLayout hint="Nombre de usuario" counterEnabled="true" error="Campo requerido" errorEnabled="false">
        <TextField formControlName="username" horizontalAlignment="stretch" (textChange)="isValid(registerForm.get('username'), username)"></TextField>
    </TextInputLayout>

    <TextInputLayout hint="Correo electrónico" counterEnabled="true" error="Campo requerido" errorEnabled="false">
        <TextField formControlName="email" keyboardType="email" autocorrect="false" horizontalAlignment="stretch" (textChange)="isValid(registerForm.get('email'), email)"></TextField>
    </TextInputLayout>

    <TextInputLayout hint="Contraseña" counterEnabled="true" error="Campo requerido" errorEnabled="false">
        <TextField formControlName="password" secure="true" horizontalAlignment="stretch" (textChange)="isValid(registerForm.get('password'), password)"></TextField>
    </TextInputLayout>

    <TextInputLayout hint="Repetir contraseña" counterEnabled="true" error="Las contraseñas no coinciden" errorEnabled="false">
        <TextField formControlName="repeatpassword" secure="true" horizontalAlignment="stretch" (textChange)="isValid(registerForm.get('repeatpassword'), repeatpassword)"></TextField>
    </TextInputLayout>

    <TextInputLayout hint="Código postal" counterEnabled="true" error="Código inválido" errorEnabled="false">
        <TextField formControlName="zipcode" secure="true" keyboardType="number" autocorrect="false" horizontalAlignment="stretch"
            (textChange)="isValid(registerForm.get('zipcode'), zipcode)"></TextField>
    </TextInputLayout>
    <Button text="REGISTRARSE" (tap)="signup()" horizontalAlignment="center" [isEnabled]="registerForm.valid"></Button>
</StackLayout>

This is the method that checks for validity:

 isValid(e: any, id: string) {
        // We get the TextInputLayout by its id.
        const textInputLayout: any = this.page.getViewById(id);
        if (e.dirty && e.invalid) {
            textInputLayout.set("errorEnabled", true); // If the user has 
                                                       // typed something
        } else if (e.dirty && e.valid) {
            textInputLayout.set("errorEnabled", false);
        }
    }

And this is what I’m getting:

The method is being called and the property is being set, but it doesn’t matter if I type something and the field it’s valid, the error message won’t disappear. Any ideas of how could I fix this? If you know about another approach I’m open to suggestions.


#2

Try it this way instead

isValid(e: any, id: string) {
        // We get the TextInputLayout by its id.
        const textInputLayout: any = this.page.getViewById(id);

        // We start out by assuming user has typed correctly
        textInputLayout.set("errorEnabled", false);
        if (e.dirty && e.invalid) {
            // If there is any error, we show the error
            textInputLayout.set("errorEnabled", true); 
        } 
    }