iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 21
1
Modern Web

Angular 8 從推坑到放棄系列 第 21

[Day 20] Angular 使用 React Form

如有需要動態驗證、動態產生表單和比較複雜類型的表單狀況,使用 Reactive Form 處理應當會比 Template-Drive Form 好解決.

匯入 ReactiveFormModule

app.module

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

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

@NgModule({
  // ...
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule
  ],
  // ...
})
export class AppModule { }

引用完 Reactive Form 接下來先修改 template
app.component.html

<form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
  <input formControlName="name" placeholder="Your name">
  <input formControlName="email" placeholder="Your email">
  <input formControlName="message" placeholder="Your message">

  <button type="submit">Send</button>
</form>

其中 template 用到了以下的 directive

  1. formGroup
  2. ngSubmit
  3. formControlName

實作

app.component.html

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

@Component({
  // ...
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl('Benedict'),
      email: new FormControl(''),
      message: new FormControl('')
    });
  }

  onSubmit(form: FormGroup) {
    console.log('Valid?', form.valid); // true or false
    console.log('Name', form.value.name);
    console.log('Email', form.value.email);
    console.log('Message', form.value.message);
  }
}

參考

  1. Reactive Forms in Angular: An Introduction
  2. DAY18-Angular6之表單-簡易Reactive Form

上一篇
[Day 19] 初步使用 Observable
下一篇
[Day 21] 介紹 Pipe
系列文
Angular 8 從推坑到放棄30

尚未有邦友留言

立即登入留言