NativeScript Email validation is not working

Question

I'm need to verify that entered text im my TextField is an email. I'm usually using Form Group to do this. In my Form Control property im using "updateOn: 'blur'. But I have problem if I have only 1 TextField in current view. It seems like (blur) is not called.

I'm do this in few other places in my app but only there it don't work. Only difference is that there is only one TextField in component, and in others is few more (2-5).

'''''HTML

<TextField id="field" class="input" hint="E-mail" keyboardType="email" returnKeyType="done" formControlName="email" #emailQ [ngClass]="{niepoprawne: !emailQValid}" (returnPress)="wyslij()"></TextField>
    <Button text="Wyślij" class="button" (tap)="wyslij()"></Button>

'''''''TS export class ZapomnialemComponent implements OnInit {

form: FormGroup;

@ViewChild('emailQ', { static: false }) emailQRef: ElementRef<TextField>;

emailQValid: boolean = true;

wyslanePrzyp: boolean = false;

constructor() {

}

ngOnInit() {


    this.form = new FormGroup({
        email: new FormControl(null, { updateOn: 'blur', validators: [Validators.required, Validators.email] })
    });


    this.form.get('email').statusChanges.subscribe(status => {
        this.emailQValid = status === 'VALID';
    });
}

wyslij()
{
    if(!this.form.valid)
    {
        this.displayAlertDialog("Wprowadź poprawny adres e-mail")
        return;
    }

    this.wyslanePrzyp = true;
}

Answer 1

You have only one text field in your form and have set updateOn to blur. Your text field will not hit blur unless you change the focus to next field Or programatically remove focus from the text field.