首先

由于Vue的流行趋势已经稍有下降的感觉，为了推动Angular的发展，我们需要立即发布一些内容！（第2部分）

就”Angular”而言，在表单方面可以说是它的优势。如果要添加验证，我认为使用”ReactiveForm”的”FormGroup”和”FormBuilder”会更直观和方便。

我想要将其用于为MaterialDesign提供组件的Angular Material表单。但是官方文档的示例只提供了使用简单FormControl的选项。

所以我决定试试看。

备好

首先，可以通过执行ng new命令创建一个能够编写Angular的环境，然后添加主角“Angular Material”。

$: npm install --save @angular/material @angular/cdk @angular/animations

请用yarn命令代替Yarn派。

在app.module.ts中添加BrowserAnimationsModule和计划使用的每个Material组件（Mat○○Module）。

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatSelectModule,
} from '@angular/material';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

同时还应用了CSS。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

请查阅官方文件以了解主题和每个组件的详细内容。

组件

因为很麻烦，所以这次将所有内容都写在AppComponent中。

表單項目和驗證類型。

• お名前（テキスト）　 必須

• 性別（セレクト）　　 必須＋「未選択（0）」以上

Eメール（テキスト）　メールタイプ

我只使用了毫无艺术可言的组合。

由于是一个响应式表单，当离开每个输入字段时，会进行验证并且如果有错误的话会进行显示。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';

// 性別用型
interface Gender {
  value: number;
  display: string;
}

@Component({
  selector: 'app-root',
  template:
  `
  <form [formGroup]="editForm" (ngSubmit)="onSave()" class="form">
    <mat-form-field class="form-field">
      <input matInput placeholder="お名前" formControlName="name" required>
      <mat-error *ngIf="name.invalid && (name.dirty || name.touched)">お名前は必須です</mat-error>
    </mat-form-field>
    <mat-form-field class="form-field">
      <mat-select placeholder="性別" formControlName="genderValue" required>
        <mat-option *ngFor="let gender of genders" [value]="gender.value">
          {{ gender.display }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="genderValue.invalid && (genderValue.dirty || genderValue.touched)">性別は必須です</mat-error>
    </mat-form-field>
    <mat-form-field class="form-field">
      <input matInput placeholder="Eメール" formControlName="mail">
      <mat-error *ngIf="mail.invalid && (mail.dirty || mail.touched)">Eメールが不正です</mat-error>
    </mat-form-field>
    <div class="action">
      <button type="submit" mat-button color="primary" [disabled]="editForm.invalid">SAVE</button>
    </div>
  </form>
  `,
  styles: [
    `
      :host {
        display: box;
        box-sizing: border-box;
      }
      .form {
        margin: 8px;
        padding: 8px;
      }
      .form-field {
        width: 100%;
      }
      .action {
        display: flex;
        justify-content: space-around;
      }
    `,
  ]
})
export class AppComponent implements OnInit {
  // 性別一覧
  genders: Gender[] = [
    {
      value: 0,
      display: '未選択',
    },
    {
      value: 1,
      display: '漢',
    },
    {
      value: 2,
      display: '女性',
    },
    {
      value: 3,
      display: 'どちらでもない',
    },
  ];

  // FormGroup
  editForm: FormGroup;


  // 各フォームコントロールを取得するGetter
  get name(): AbstractControl {
    return this.editForm.get('name');
  }
  get genderValue(): AbstractControl {
    return this.editForm.get('genderValue');
  }
  get mail(): AbstractControl {
    return this.editForm.get('mail');
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.editForm = this.fb.group({
      name: ['', [Validators.required]],
      genderValue: [0, [Validators.required, Validators.min(1)]],
      mail: ['', [Validators.email]],
    });
  }

  onSave() {
    console.log(this.editForm.value);
  }
}

跑步

$: ng serve

在这种情况下，点击“保存”按钮，浏览器的开发控制台应该会显示{name: “てすとくん”, genderValue: 1, mail: “testkun@test.com”}。

总之

我总是这么想，如果用日语来表达，感觉材料感会减弱，可能只是我一个人这样觉得吧？

我真的觉得Angular在表单方面非常强大，所以希望Angular能更流行起来。