フォームの使い方

Tweet

バリデーション基本形

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  myForm:FormGroup;
  message:string;

  constructor(){

  }

  ngOnInit() {
    this.myForm = new FormGroup(
      {
        name: new FormControl('', [Validators.required]),
        mail: new FormControl('', [Validators.email]),
        age: new FormControl(0, [Validators.min(1), Validators.max(150)])
      }
    )
  }

  onSubmit() {
    if(this.myForm.invalid) {
      this.message = "不正な値が入力されています";
    }
    else {
      let result = this.myForm.value;
      this.message = JSON.stringify(result);  
    }
  }
}

app.component.html

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <p>
    <input type="text" formControlName="name">
  </p>

  <p>
    <input type="text" formControlName="mail">
  </p>

  <p>
    <input type="number" formControlName="age">
  </p>

  <p>
    <input type="submit" value="click">
  </p>
</form>

<p>{{message}}</p>

前ページと変化なし。

app.module.ts

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

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

前ページと変化なし。