아이오닉 form handling

모듈 기본 세팅값

// module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
  ...

위와같은 환경?을 구축해 두셔야 합니다.

---

<!-- HTML -->
<form [formGroup]="optionForm" (ngSubmit)="submitForm()">

  <ion-item lines="full">
    <ion-label position="floating">날짜</ion-label>
    <ion-datetime formControlName="workDate" min="2020-02-11" displayFormat="YYYY-MM-DD"></ion-datetime>
  </ion-item>
  
  <ion-button type="submit" color="danger" expand="block" [disabled]="!optionForm.valid">설정하기</ion-button>  
  
</form>

기본적으로 <form>, <ion-input>, <ion-button> 이렇게 3개로 구성됩니다.

 

// ts.file

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

@Component({
  selector: ... 생략
})
export class ... {

  optionForm: FormGroup;

  constructor(public formBuilder: FormBuilder) { }

  ngOnInit() {
    this.optionForm = this.formBuilder.group({
      workDate: [new Date().toISOString(), [Validators.required]]
    })
  }
  
  submitForm() {
    console.log(this.optionForm.value)
  }
}

onInit할때, form을 설정합니다. (Validator 및 초기값을 추가할 수 있습니다.)

 

submit 버튼에 [disabled]="!optionForm.valid"를 이용하여 모든 form구릅 안에 있는 Validation이 통과해야만 클릭할 수 있도록

할 수 있습니다.

---

결과화면(입력전)

결과화면(입력후)