angular-material-app documentation
  1. Components
  2. ValidationComponent

File

src/app/forms/validation/validation.component.ts

Implements

OnInit

Metadata

selector app-validation
styleUrls ./validation.component.scss
templateUrl ./validation.component.html

Index

Properties
Methods

Constructor

constructor(fb: FormBuilder)
Defined in src/app/forms/validation/validation.component.ts:34
Parameters :
Name Type Optional
fb FormBuilder No

Methods

createForm
createForm()
Defined in src/app/forms/validation/validation.component.ts:42
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/forms/validation/validation.component.ts:40
Returns : void
onSubmit
onSubmit()
Defined in src/app/forms/validation/validation.component.ts:69
Returns : void
onValueChanged
onValueChanged(data?: any)
Defined in src/app/forms/validation/validation.component.ts:73
Parameters :
Name Type Optional
data any Yes
Returns : void
rebuildForm
rebuildForm()
Defined in src/app/forms/validation/validation.component.ts:63
Returns : void

Properties

formErrors
Type : object
Default value : { username: '', email: '', password: '' }
Defined in src/app/forms/validation/validation.component.ts:13
hide
Default value : true
Defined in src/app/forms/validation/validation.component.ts:10
registerFrom
Type : FormGroup
Defined in src/app/forms/validation/validation.component.ts:12
validationMessages
Type : object
Default value : { username: { required: '', minlength: '请输入大于4个字符', maxlength: '请输入小于32个字符' }, email: { required: '', email: '请输入正确的邮箱' }, password: { required: '', pattern: '密码中必须包含数字和字母', minlength: '请输入大于4个字符', maxlength: '请输入小于25个字符' } }
Defined in src/app/forms/validation/validation.component.ts:18
 
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-validation',
  templateUrl: './validation.component.html',
  styleUrls: ['./validation.component.scss']
})
export class ValidationComponent implements OnInit {
  hide = true;

  registerFrom: FormGroup;
  formErrors = {
    username: '',
    email: '',
    password: ''
  };
  validationMessages = {
    username: {
      required: '',
      minlength: '请输入大于4个字符',
      maxlength: '请输入小于32个字符'
    },
    email: {
      required: '',
      email: '请输入正确的邮箱'
    },
    password: {
      required: '',
      pattern: '密码中必须包含数字和字母',
      minlength: '请输入大于4个字符',
      maxlength: '请输入小于25个字符'
    }
  };

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  ngOnInit() {}

  createForm() {
    this.registerFrom = this.fb.group({
      username: ['', [Validators.maxLength(32)]],
      email: ['', [Validators.required, Validators.email]],
      password: [
        '',
        [
          Validators.pattern('^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$'),
          Validators.minLength(6),
          Validators.maxLength(16)
        ]
      ],
      password_confirm: '',
      phone: '',
      agree: ''
    });

    this.registerFrom.valueChanges.subscribe(data => this.onValueChanged(data));
    this.onValueChanged();
  }

  rebuildForm() {
    this.registerFrom.reset({
      username: 'stbui'
    });
  }

  onSubmit() {
    console.log(this.registerFrom.value);
  }

  onValueChanged(data?: any) {
    if (!this.registerFrom) {
      return;
    }
    const form = this.registerFrom;
    for (const field in this.formErrors) {
      if (Object.prototype.hasOwnProperty.call(this.formErrors, field)) {
        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) {
            if (Object.prototype.hasOwnProperty.call(control.errors, key)) {
              this.formErrors[field] += messages[key] + ' ';
            }
          }
        }
      }
    }
  }
}
Copy
<div fxLayout="row wrap" fxLayoutGap="24px grid">
  <div fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <mat-card>
      <mat-card-title>注册</mat-card-title>
      <mat-card-content>
        <form [formGroup]="registerFrom" (ngSubmit)="onSubmit()">
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的用户名" formControlName="username" required minlength="4" maxlength="10">
            <mat-error *ngIf="formErrors.username">{{formErrors.username}}</mat-error>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的邮箱" formControlName="email" required>
            <mat-error *ngIf="formErrors.email">{{formErrors.email}}</mat-error>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的密码" formControlName="password" [type]="hide ? 'password' : 'text'"
              required>
            <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请再次输入您的密码" formControlName="password_confirm" required>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的手机" formControlName="phone" minlength="11" maxlength="11">
            <mat-hint align="end">{{registerFrom.value.phone?.length || 0}}/11</mat-hint>
          </mat-form-field>
          <mat-checkbox class="form-check" formControlName="agree">我同意</mat-checkbox>
          <button mat-raised-button color="primary" type="submit" [disabled]="!registerFrom.valid">提交</button>
          <button mat-raised-button color="default" type="button" (click)="rebuildForm()">清空</button>
        </form>

        <p>{{registerFrom.value | json}}</p>
      </mat-card-content>
    </mat-card>
  </div>

  <div fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <mat-card>
      <mat-card-title>联系方式</mat-card-title>
      <mat-card-content>
        <form #formContact="ngForm">
          <mat-form-field class="display-block">
            <input matInput placeholder="您的名字" name="name" ngModel required minlength="4" maxlength="10">
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="您的邮箱" name="email" ngModel required>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请您的网址" name="website ngModel" required>
          </mat-form-field>
          <mat-form-field class="display-block">
            <textarea matInput placeholder="留言" rows="3" name="message" ngModel required></textarea>
          </mat-form-field>
          <mat-checkbox class="form-check">我同意</mat-checkbox>
          <button mat-raised-button color="primary" type="submit" [disabled]="!formContact.valid">提交</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>
Copy

./validation.component.scss 

:host {
  display: block;
  padding: 15px;
}

.form-check {
  display: block;
  margin: 16px 0 32px;
}

.display-block {
  display: block;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""