ionic3使用form表单

ts

  import { Validators, FormGroup, FormControl} from '@angular/forms';
  loginForm=new FormGroup({
    phone:new FormControl('',Validators.compose([Validators.required,Validators.minLength(11),Validators.maxLength(11),Validators.pattern(new RegExp(constUtil.phoneReg))])),
    password:new FormControl('',Validators.compose([Validators.required,Validators.minLength(8)]))
  })
  login(value){}

html

  <form class="addPage" [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
    <ion-list>
        <input formInvalid [control]="loginForm.get('phone')" type="phone" formControlName="phone" placeholder="手机号" maxlength="11">
      </ion-list>
      <ion-list>
        <input formInvalid [control]="loginForm.get('password')" type="password" formControlName="password" placeholder="密码最少8位">
      </ion-list>
      <ion-list class="submitBtn">
        <button ion-button round [disabled]="!loginForm.valid">登 录</button>
      </ion-list>
  </form>

红线提示,使用的时候需要导入page 的module

import { Directive, Input, HostListener, ElementRef, HostBinding } from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { timeout } from 'rxjs/operator/timeout';


/**
 * 表单校验指令
 */
@Directive({
  selector: '[formInvalid]' 
})
export class FormInvalidDirective {

  constructor(public element: ElementRef) {}

  @Input('control') value: AbstractControl;

  @HostListener('ionChange', ['$event.target'])
  ionChange(html: HTMLElement): void {
    this.validor();
  }

  @HostListener('touchend', ['$event.target']) //ios 使用click
  ontouchend(html: HTMLElement): void {
    this.validor();
  }

  @HostListener('keydown', ['$event.target'])
  onCheck(data: any): void {
    //ts中有赋值操作 所以要延时
    setTimeout(() => {
      this.validor();
    }, 10);
  }

  validor(): void {
    if(!this.value.valid){
      this.element.nativeElement.classList.add("redLine")
    }else{
      this.element.nativeElement.classList.remove("redLine")
    }
  }
}