トッカンソフトウェア

Angular リアクティブフォーム

今回は リアクティブフォーム をやります。

Angular CLIの続きからやるので、環境がない場合、そちらを参考に環境構築してください。

サンプルソース

FormGroupやFormControlを使ってリアクティブフォームで連携します。

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

@Component({
  selector: 'app-root',
  template:
    `
    <form [formGroup]="frmGrp" novalidate>
      Name: <input formControlName="name">
      Password: <input formControlName="pass">
    </form>
    <p>Value: {{ frmGrp.value | json }}</p>
    <p>Validator: {{ frmGrp.valid  }}</p>
    `
})
export class AppComponent {
  frmGrp: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  createForm() {
    this.frmGrp = this.fb.group({
      name: '' ,
      pass: ['', Validators.required]
    });
  }
}

			


app.module.tsモジュールでReactiveFormsModuleをimportし、@NgModuleのimportsにReactiveFormsModuleを指定する必要があります。

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

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

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


			

実行イメージ






ページのトップへ戻る