angular表单

angular表单和bootstrap表单比较：

以前对bootstrap表单比较熟悉，今天解锁了新技能：angular表单

首先，提交方式基本一致，都是表单控件的value值

angular：

bootstrap：

angular注册：

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

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

现在，这些独立的表单控件被收集到了一个控件组中。这个 FormGroup 用对象的形式提供了它的模型值，这个值来自组中每个控件的值。 FormGroup 实例拥有和 FormControl 实例相同的属性（比如 value、untouched）和方法（比如 setValue()）。

把这个 FormGroup 模型关联到视图。

这个表单组还能跟踪其中每个控件的状态及其变化，所以如果其中的某个控件的状态或值变化了，父控件也会发出一次新的状态变更或值变更事件。该控件组的模型来自它的所有成员。在定义了这个模型之后，你必须更新模板，来把该模型反映到视图中。

<form [formGroup]="profileForm">
  
  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

　　表单验证：

这里有两种表单验证方式，首先第一种是官方教程的验证：

<input id="name" name="name" class="form-control"
      required minlength="4" appForbiddenName="bob"
      [(ngModel)]="hero.name" #name="ngModel" >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

</div>

在这个例子中，name 控件设置了两个内置验证器 - Validators.required 和 Validators.minLength(4) 以及一个自定义验证器 forbiddenNameValidator。

所有这些验证器都是同步的，所以它们作为第二个参数传递。注意，你可以通过把这些函数放到一个数组中传入来支持多个验证器。

这个例子还添加了一些 getter 方法。在响应式表单中，你通常会通过它所属的控件组（FormGroup）的 get 方法来访问表单控件，但有时候为模板定义一些 getter 作为简短形式。

如果你到模板中找到 name 输入框，就会发现它和模板驱动的例子很相似。

自定义验证器：

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };
}

把自定义验证器添加到响应式表单中：

this.heroForm = new FormGroup({
  'name': new FormControl(this.hero.name, [
    Validators.required,
    Validators.minLength(4),
    forbiddenNameValidator(/bob/i) // <-- Here's how you pass in the custom validator.
  ]),
  'alterEgo': new FormControl(this.hero.alterEgo),
  'power': new FormControl(this.hero.power, Validators.required)
});

　　另一种方式：

ceshi=new FormControl('', [Validators.required,Validators.minLength(5)])
  getErrorMessage() {
    //console.log(this.ceshi)
    if(this.ceshi.errors.minlength){console.log("000")}
    return this.ceshi.hasError('required') ? 'You must enter a value' :
            '';
  }

　　获取所有警告信息，如果没有可以执行提交

<form #form2="ngForm" name="myform">
        <span>建筑类型:</span>
        <mat-form-field style="margin-left: 10px;">
          <mat-select  name='chaxun' [(ngModel)]="chaxun">
            <mat-option  *ngFor="let item of this.echartsData.buildingType" [value]="item.name">{{item.name}}</mat-option>
          </mat-select>
        </mat-form-field>
        
        <input   id="name" name="username" ng-minlength="5" [formControl]="ceshi">
      <span *ngIf="ceshi.invalid">{{getErrorMessage()}}</span>
      <!-- <span *ngIf="ceshi.errors.minlength">5</span> -->
        <button type="submit" mat-raised-button color="primary" (click)="findClick()">查询</button>
      </form>

　　页面显示警告信息