Angular 폼과 유효성 검증

<form novalidate></form>

<form ngNoForm></form>

<form (ngSumbit)="onNgSumbit()" novalidate></form>

<form #f="ngForm" (ngSubmit)="onNgSubmit(f)" novalidate></form>

NgForm 인스턴스 생성
-> 자신이 적용된 폼 요소의 값 또는 유효성 검증 상태를 추적할 수 있는 기능을 제공하는 FormGroup 인스턴스 생성
-> NgForm 인스턴스의 프로퍼티로 추가
-> FormGroup 이 프로퍼티로 추가된 NgForm 인스턴스를 참조변수가 가리킴
만약 -> 폼 요소의 자식 폼 컨트롤 요소 중 NgModel 디렉티브가 적용된것이 있다면
    -> FormControl 인스턴스를 생성하고 FormGroup 인스턴스의 프로퍼티로 추가

<form #userForm="ngForm" (ngSubmit)="onNgSubmit(userForm)" novalidate>
  <input type="text" name="userid" placeholder="userid" ngModel />
  <input type="password" name="password" placeholder="password" ngModel />
  <button>submit</button>
</form>

...
onNgSubmit(userForm: NgForm) {
  console.log(userForm.value);
  // { id: 'foo', password: 'bar'}
}

<input type="text" name="userid" ngModel #userid />
<input type="text" name="userid" ngModel #userid="ngModel" />

<input type="text" name="userid" ngModel #userid="ngModel" /> {{ userid.value }}
{{ userid.valid }}

<form #userForm="ngForm" (ngSubmit)="onNgSubmit(userForm.value)" novalidate>
  <input type="text" name="userid" placeholder="userid" ngModel />
  <div ngModelGroup="password">
    <input type="password" name="password1" placeholder="password" ngModel />
    <input
      type="password"
      name="password2"
      placeholder="confirm password"
      ngModel
    />
  </div>
  <button type="submit">확인</button>
</form>

...
onNgSubmit(user) {
  console.log(user);
  /*
  { userid: '',
    password: {
      password1: '',
      password2: '',
    }
  }
  */

  if (user.password.password1 !== user.password.password2) {
    console.log('패스워드가 일치하지 않습니다.');
  }
}

<input type="text" [(ngModel)]="name" />
<input type="text" [ngModel]="name" (ngModelChange)="name=$event" />

abstract class AbstractControl {
  constructor(validator: ValidatorFn, asyncValidator: AsyncValidatorFn)
  // ... 생략
  valid: boolean
  invalid: boolean
  errors: ValidationErrors | null
  pristine: boolean
  dirty: boolean
  touched: boolean
  untouched: boolean
}

<input
  type="text"
  name="title"
  ngModel
  #title="ngModel"
  pattern="[a-zA-Z0-9]{4,10}"
  required
/>

<em *ngIf="title.errors?.required && title.touched">title을 입력하시오</em>
<em *ngIf="title.errors?.pattern && title.touched"
  >title은 영문 또는 숫자로 4자리 이상 10이하로 입력</em
>

<p>errors: {{ title.errors | json }}</p>
<p>invalid: {{ title.invalid }}</p>
<p>dirty: {{ title.dirty }}</p>
<p>touched: {{ title.touched }}</p>
<p>pristine: {{ title.pristine }}</p>

// app.module.ts
...
import { ReactiveFormsModule } from '@angular/forms'; // import

@NgModule({
  ...
  imports: [ ..., ReactiveFormsModule ], // 추가
  ...
})

myFormGroup: FormGroup;

ngOnInit() {
  this.myFormGroup = new FormGroup({
    // 자식 폼 모델 인스턴스
  });
}

<!-- 프로퍼티 바인딩 -->
<form [formGroup]="myFormGroup" novalidate></form>

<form [formGroup]="myForm" novalidate>
  <div FormGroupName="formControls"></div>
</form>

ngOnInit() {
  this.myForm = new FormGroup({
    formControls: new FormGroup({})
  })
}

myForm
  ├─ formControls
  ├─ somethingFormGroup
  └─ formControls
      ├─ ...
      └─ ...

const myFormControl = new FormControl('init value')

<input type="text" formControlName="myControlName">

myControlName: FormControl = new FormControl('')

myControls: {
  ...생략
  valueChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
}

const myFormArray = new FormArray([
  new FormControl(''),
  new FormControl(''),
  ...
])

<div formArrayName="myArrayName">
  ...
</div>

<!-- mycomponent.component.html -->
<form [formGroup]="userForm" novalidate>
  <div formArrayName="hobbies">
    <div *ngFor="let hobby of hobbies.controls; let i=index">
      <input type="text" [formControlName]="i" />
    </div>
  </div>
</form>

<button (click)="extendHobbies()">extend</button>

<pre>{{ userForm.value | json }}</pre>
<pre>{{ userForm.status }}</pre>

// mycomponent.component.ts
// 생략
export class AppComponent implements OnInit {
  userForm: FormGroup

  ngOnInit(): void {
    this.userForm = new FormGroup({
      hobbies: new FormArray([new FormControl(''), new FormControl('')]),
    })
    console.log(this.userForm)
  }

  extendHobbies() {
    this.hobbies.push(new FormControl(''))
  }

  // getter 를 통한 접근
  get hobbies(): FormArray {
    return <FormArray>this.userForm.get('hobbies')
  }
}

// mycomponent.component.ts
import { Validators } from '@angular/forms'; // 임포트
...
this.userForm = new FormGroup({
  userid: new FormControl('', [ // 여러개인경우 배열로 처리
    Validators.required,
    Validators.pattern('[a-zA-Z0-9]{4,10}'),
  ]),
  passwordGroup: new FormGroup({
    password: new FormControl('', Validators.required), // 단일 검증은 그냥 넣어줌
    confirmPassword: new FormControl('', Validators.required),
  }),
});

class Validators {
  static min(min: number): ValidatorFn
  static max(max: number): ValidatorFn
  static required(control: AbstractControl): ValidationErrors | null
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null
  static minLength(minLength: number): ValidatorFn
  static maxLength(maxLength: number): ValidatorFn
  static pattern(pattern: string | RegExp): ValidatorFn
  static nullValidator(control: AbstractControl): ValidationErrors | null
  static compose(validators: ValidatorFn[]): ValidatorFn | null
  static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
}

my-project
  ├─ ...
  └─ src
      ├─ ...
      └─ app
          ├─ ...
          └─ validation

// myvalidator.ts
import { AbstractControl } from '@angular/forms'

export class MyValidator {
  static myValid(form: AbstractControl) {
    // 폼 모델에서 formControlName 의 값을 가져옴
    const formControlName1 = form.get('formControlName1').value
    const formControlName2 = form.get('formControlName2').value

    // 검증의 성공 유무에 따른 return 분기
    return
  }
}

import { MyValidator } from 'path';

...
export class MyComponent implements OnInit {
  ngOnInit(): void {
    this.userForm = new FormGroup({
      userid: new FormControl('', [
        Validators.required,
        Validators.pattern('[a-zA-Z0-9]{4,10}'),
      ]),
      passwordGroup: new FormGroup({
        password: new FormControl('', Validators.required),
        confirmPassword: new FormControl('', Validators.required),
      }, PasswordValidator.match), // 두번째 인자로 그룹에 대한 유효성 검사 추가
    });
  }
}

import { AbstractControl } from '@angular/forms'

export class MyValidator {
  static myValid(form: AbstractControl) {
    const value = form.value // 값 취득

    // 검증의 성공 유무에 따른 return 분기
    return
  }
}

/**************/
import { FormControl } from '@angular/forms'

export class MyValidator {
  static myValid(form: FormControl) {
    const value = form.value // 값 취득

    // 검증의 성공 유무에 따른 return 분기
    return
  }
}

import { MyValidator } from 'path';

...
export class MyComponent implements OnInit {
  ngOnInit(): void {
    this.userForm = new FormGroup({
      ...
      myKey: new FormControl('', [
        Validators.required,
        MyValidator.myValid, // 추가
      ])
    });
  }
}

// mycomponent.component.ts

export class MyComponent implements OnInit {
  constructor(
    private fb: FormBuilder // 의존성 주입
  ){ }

  ngOnInit() {
    const userForm = this.fb.group({
      userid: ['', [
        Validators.required,
        Validators.pattern('~~'),
      ]],
      passwordGroup: this.fb.group({ // FormGroup
        password: ['', Validators.required],
        confirmPassword: ['', Validators.required]
      }, { validator: PasswordValidator.match }), // 옵션 객체를 통해 검증기 추가
      someArray: this.fb.array(['', ''])
    })
  }
}
...

// FormBuilder 사용 전
passwordGroup: new FormGroup({
  password: new FormControl('', Validators.required),
  confirmPassword: new FormControl('', Validators.required)
}, PasswordValidator.match),

// FormBuilder 사용 후
passwordGroup: this.fb.group({
  password: ['', Validators.required],
  confirmPassword: ['', Validators.required]
}, { validator: PasswordValidator.match }),