时间戳

首页 > 解决方案 > 当值不符合正则表达式时，Ionic 3 显示表单错误

angular - 当值不符合正则表达式时，Ionic 3 显示表单错误

问题描述

我一直在使用离子/角度的验证表单，我想出了如何检查该字段是否为空并通知用户它需要填写。但是，当用户的输入与我的验证模式或正则表达式不匹配时，我想要做的也是通知用户。除此之外，如果有人可以向我解释，我也将不胜感激，我如何禁用提交按钮，除非所有验证器都可以使用。现在，我所拥有的只是检查每个字段是否有错误或被触摸。

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

标签： angulartypescriptvalidationionic-framework

解决方案

你可以使用这个：

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

在你的 ts 中：

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

推荐阅读