typescript 使用FormBuilder和AngularMaterial的Angular - Reactive Form

Posted 2021-05-20

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @Output() formSubmitEvent: EventEmitter = new EventEmitter();
  @Output() formCancelEvent: EventEmitter = new EventEmitter();

  public allTags: any[] = [1, 2, 3, 4, 5, 6];
  public bookForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.bookForm = this.fb.group({
      title: ['', Validators.required],
      author: ['', Validators.required],
      tags: [[]]
    });
  }

  submit(formData) {
    return this.formCancelEvent.emit(formData);
  }

  cancel() {
    return this.formCancelEvent.emit(null);
  }
}


// <form [formGroup]="bookForm">
//   <mat-form-field floatLabel="Title">
//     <mat-label>Title</mat-label>
//     <input matInput formControlName="title" placeholder="Title" required>
//   </mat-form-field>

//   <mat-form-field floatLabel="Author">
//     <mat-label>Author</mat-label>
//     <input matInput formControlName="author" placeholder="Author" required>
//   </mat-form-field>

//   <mat-form-field>
//     <mat-select placeholder="Tags" formControlName="tags" multiple>
//       <mat-select-trigger>
//         {{bookForm.controls['tags'].value ? bookForm.controls['tags'].value[0] : ''}}
//         <span *ngIf="bookForm.controls['tags'].value?.length > 1" class="example-additional-selection">
//           (+ {{bookForm.controls['tags'].value.length - 1}} others)
//         </span>
//       </mat-select-trigger>
//       <mat-option *ngFor="let tag of allTags" [value]="tag">{{tag}}</mat-option>
//     </mat-select>
//   </mat-form-field>

//   <div class="form-footer">
//     <button color="primary" type="submit" (click)="submit(bookForm.value)" mat-raised-button>Save</button>
//     <button type="button" mat-raised-button (click)="cancel()">Cancel</button>
//   </div>
// </form>