angular2 表单验证: FormBuilder(CSS)

[pengkobe]

JS 开发

导入相关库文件

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

构建验证逻辑

public formErrors = {
    'userName': '',
    'confirmPassword': '',
    'formError': ''
  };
  validationMessages = {
    'userName': {
      'required': '用户名必须输入。',
      'minlength': '用户名4到32个字符。'
    },
    'password': {
      'required': '密码必须输入。',
      'minlength': '密码至少要8位。'
    }
};

创建表单

 this.userForm = this.fb.group({
      "userName": [
        this.userInfo.userName,
        [
          Validators.required,
          Validators.minLength(4),
          Validators.maxLength(32)
        ]
      ],
      "password": [
        this.userInfo.password,
        [
          Validators.required,
          Validators.minLength(8),
        ]
      ]
});

监听输入

this.userForm.valueChanges
.subscribe(data => this.onValueChanged(data));
this.onValueChanged();

onValueChanged(data?: any) {
    if (!this.userForm) {
      return;
    }
    const form = this.userForm;
    for (const field in this.formErrors) {
      this.formErrors[field] = '';
      const control = form.get(field);
      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

[pengkobe]

HTML 开发

<form [formGroup]="userForm" (ngSubmit)="Login()" class="form-horizontal" role="form" novalidate>
                <div class="form-group" [ngClass]="{'has-error': formErrors.userName }">
                    <label class="col-sm-3 control-label">userName</label>
                    <div class="col-sm-8">
                        <input formControlName="userName" type="text" class="form-control" >
                        <div *ngIf="formErrors.userName" class="text-danger">
                            {{ formErrors.userName }}
                        </div>
                    </div>
                </div>
                <div class="form-group" [ngClass]="{'has-error': formErrors.password }">
                    <label class="col-sm-3 control-label">password</label>
                    <div class="col-sm-8">
                        <input formControlName="password" reverse=true 
                        type="password" class="form-control" >
                        <div *ngIf="formErrors.password" class="text-danger">
                            {{ formErrors.password }}
                        </div>
                    </div>
                </div>
                <div *ngIf="formErrors.formError" class="alert-danger">{{ formErrors.formError }}</div>
                <div class="form-group">
                    <button [disabled]="userForm.invalid" type="submit" class="btn btn-success">Login</button>
                </div>
            </form>