创建一个有效的表单Angular 6

npm install -g @angular/cli

ng new my-form-app
cd my-form-app

ng generate component form

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

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      message: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input id="name" type="text" formControlName="name">
    <div *ngIf="form.get('name').invalid && (form.get('name').dirty || form.get('name').touched)">
      <div *ngIf="form.get('name').errors.required">Name is required.</div>
    </div>
  </div>

  <div>
    <label for="email">Email:</label>
    <input id="email" type="email" formControlName="email">
    <div *ngIf="form.get('email').invalid && (form.get('email').dirty || form.get('email').touched)">
      <div *ng感应'form.get('email').errors.required">Email is required.</div>
      <div *ngIf="form.get('email').errors.email">Invalid email format.</div>
    </div>
  </div>

  <div>
    <label for="message">Message:</label>
    <textarea id="message" formControlName="message"></textarea>
    <div *ngIf="form.get('message').invalid && (form.get('message').dirty || form.get('message').touched)">
      <div *ngIf="form.get('message').errors.required">Message is required.</div>
    </div>
  </div>

  <button type="submit" [disabled]="form.invalid">Submit</button>
</form>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { FormComponent } from './form/form.component';

@NgModule({
  declarations: [
    AppComponent,
    FormComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }