Ionic 3 отображается в форме ошибки, когда значения не соответствуют регулярному выражению

Question

Я работал над формами проверки с помощью ionic / angular и выяснил, как проверить, является ли поле пустым, и уведомить пользователя о том, что оно должно быть заполнено. Однако я хочу также уведомить пользователя, когда его ввод не соответствует моему шаблону проверки или моему регулярному выражению. Кроме этого, я также был бы признателен, если бы кто-то мог объяснить мне, как отключить кнопку отправки, если все валидаторы не подходят. Пока все, что у меня есть, - это проверка каждого поля на наличие ошибок или касание.

мой файл TS:

 constructor(public navCtrl: NavController, public formBuilder: FormBuilder) {
    this.db = firebase.firestore();
    this.loadData();
    this.formGroup = formBuilder.group({
        nome:['', Validators.compose([Validators.minLength(4), Validators.maxLength(12), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
        sexo: ['', Validators.required],
        cpf: ['', Validators.compose([Validators.minLength(4), Validators.maxLength(50), Validators.pattern(('/^\d{3}\.\d{3}\.\d{3}\-\d{2}$/')), Validators.required])],
        nascimento: ['', Validators.required],
        email: ['', Validators.compose([Validators.minLength(4), Validators.maxLength(50), Validators.pattern('/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'), Validators.required])],
        telefone:['', Validators.compose([Validators.pattern('([0-9]{2}[0-9]{8})|([0-9]{2}[0-9]{9})'), Validators.required])],
        endereco: ['', Validators.compose([Validators.minLength(4), Validators.maxLength(80), Validators.required])],
        login: ['', Validators.required, Validators.minLength(4)],
        senha:['', Validators.minLength(8)],
    });
        this.nome = this.formGroup.controls['nome'];
        this.sexo = this.formGroup.controls['sexo'];
        this.cpf = this.formGroup.controls['cpf'];
        this.nascimento = this.formGroup.controls['nascimento'];
        this.email = this.formGroup.controls['email'];
        this.telefone = this.formGroup.controls['telefone'];
        this.endereco = this.formGroup.controls['endereco'];
        this.login = this.formGroup.controls['login'];
        this.senha = this.formGroup.controls['senha'];

  }

HTML-файл:

<ion-content padding>
  <form [formGroup]="formGroup">
  <ion-list>
    <ion-item>
      <ion-label floating>Nome:</ion-label>
      <ion-input type="text" value="" [(ngModel)]="model.nome" formControlName="nome"></ion-input>
    </ion-item>
    <ion-item *ngIf="nome.hasError('required') && nome.touched">
      <p>*Campo nome é obrigatório</p>
    </ion-item>


    <ion-list radio-group [(ngModel)]="model.sexo"  formControlName="sexo">
        <ion-item>
          <ion-label>Masculino</ion-label>
          <ion-radio value="masculino"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>Feminino</ion-label>
          <ion-radio value="feminino"></ion-radio>
        </ion-item>
      </ion-list>
      <ion-item *ngIf="sexo.hasError('required') && sexo.touched">
          <p>*Campo sexo é obrigatório</p>
      </ion-item>



      <ion-item>
      <ion-label floating>CPF:</ion-label>
      <ion-textarea type="text" [(ngModel)]="model.cpf"  formControlName="cpf"></ion-textarea>
    </ion-item>
    <ion-item *ngIf="cpf.hasError('required') && cpf.touched">
        <p>*Campo CPF é obrigatório</p>
      </ion-item>



    <ion-item>
      <ion-label floating>Data de Nascimento:</ion-label>
      <ion-datetime displayFormat="DD/MM/YYYY" [(ngModel)]="model.nascimento"  formControlName="nascimento"></ion-datetime>
    </ion-item>
    <ion-item *ngIf="nascimento.hasError('required') && nascimento.touched">
        <p>*Campo data de nascimento é obrigatório</p>
      </ion-item>



    <ion-item>
      <ion-label floating>E-mail:</ion-label>
      <ion-textarea type="text" [(ngModel)]="model.email"  formControlName="email"></ion-textarea>
    </ion-item>
    <ion-item *ngIf="email.hasError('required') && email.touched">
        <p>*Campo email é obrigatório</p>
      </ion-item>



      <ion-item>
      <ion-label floating>Telefone</ion-label>
      <ion-textarea type="text" [(ngModel)]="model.telefone"  formControlName="telefone"></ion-textarea>
    </ion-item>
    <ion-item *ngIf="telefone.hasError('required') && telefone.touched">
        <p>*Campo telefone é obrigatório</p>
      </ion-item>






    <ion-item>
      <ion-label floating>Endereço</ion-label>
      <ion-textarea type="text" [(ngModel)]="model.endereco"  formControlName="endereco"></ion-textarea>
    <ion-item *ngIf="endereco.hasError('required') && endereco.touched">
        <p>*Campo endereço é obrigatório</p>
      </ion-item>

    </ion-item>

      <ion-item>
      <ion-label floating>Login</ion-label>
      <ion-textarea type="text" [(ngModel)]="model.login"  formControlName="login"></ion-textarea>
    </ion-item>
    <ion-item *ngIf="login.hasError('required') && login.touched">
        <p>*Campo login é obrigatório</p>
      </ion-item>



    <ion-item>
      <ion-label floating>Senha</ion-label>
      <ion-textarea type="password" [(ngModel)]="model.senha"  formControlName="senha"></ion-textarea>
    </ion-item>
    <ion-item *ngIf="senha.hasError('required') && senha.touched">
        <p>*Campo senha é obrigatório</p>
      </ion-item>


    <ion-item>
      <button type="button" (click)="addMessage()" ion-button full>Submit</button>
    </ion-item>
  </ion-list>
</form>


</ion-content>

Answer 1

Вы можете использовать это:

    <ion-content>
  <form *ngIf="form" [formGroup]="form" (ngSubmit)="createItem()">
    <ion-list>
      <ion-item>
        <ion-label color="primary">{{ 'EMAIL_TITLE_INPUT' | translate }}</ion- 
          label>
        <ion-input type="email"  formControlName="email"></ion-input>
      </ion-item>
      <ion-item class="error-message" *ngIf="hasError('email', 'emailBadFormat')">
        <p text-wrap>Email is not valid</p>
      </ion-item>
      <ion-item>
        <ion-label color="primary">{{ 'PASSWORD_TITLE_INPUT' | translate }}</ion-label>
        <ion-input type="password"  formControlName="password"></ion-input>
      </ion-item>
      <ion-item class="error-message" *ngIf="hasError('password', 'passwordBadFormat')">
        <p text-wrap>Password must contain at least 1 uppercase Letter, 1 Number and must be between 4 and 12 characters long</p>
      </ion-item>
    </ion-list>
  </form>
</ion-content>

в тс:

import {InputValidators} from "./InputValidator";

constructor(formBuilder: FormBuilder) {

    this.form = formBuilder.group({
      email: ['', [Validators.required, InputValidators.emailValidate()]],
      password: ['', [Validators.required, InputValidators.passwordValidate()]],
      phone: ['']
    });
  }

hasError(field: string, error: string) {
    const ctrl = this.form.get(field);
    return ctrl.dirty && ctrl.hasError(error);
  }

в InputValidator.ts

import { AbstractControl} from "@angular/forms";

export class InputValidators {

  static passwordValidate() {
    return (control:AbstractControl): {[key:string] : boolean} => {
      if (!control.value || 0 === control.value.length) {
        return null;
      }

      if (/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,12}$/.test(control.value)){
        return null;
      }

      return {"passwordBadFormat": true};
    };
  }

  static emailValidate() {
    return (control:AbstractControl): {[key:string] : boolean} => {
      if (!control.value || 0 === control.value.length) {
        return null;
      }

      if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(control.value)){
        return null;
      }

      return {"emailBadFormat": true};
    };
  }
}

Answer 2

Вы можете следовать этому примеру с кнопкой действительным :)

    import { Component } from '@angular/core';
    import {Validators, FormBuilder, FormGroup } from '@angular/forms';

    @Component({
    template: `
    <form [formGroup]="todo" (ngSubmit)="logForm()">
      <ion-item>
        <ion-label>Todo</ion-label>
        <ion-input type="text" formControlName="title"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Description</ion-label>
        <ion-textarea formControlName="description"></ion-textarea>
      </ion-item>
      <button ion-button type="submit" [disabled]="!todo.valid">Submit</button>
    </form>
      `
    })

   export class FormsPage {
   private todo : FormGroup;

   constructor( private formBuilder: FormBuilder ) {
     this.todo = this.formBuilder.group({
       title: ['', Validators.required],
       description: [''],
     });
    }
    logForm(){
      console.log(this.todo.value)
     }
   }