Angularのリアクティブフォームにおけるバリデーションの実装をまとめました。
フォームを作る上で、既存のバリデーションだけでは不十分なケースは多々ありますよね。後半ではカスタムバリデーションの実装例もご紹介したいと思います。
#1. 組み込みバリデータを使う
まずは基本中の基本から。
Angularでは組み込みバリデータがValidatorsクラスにまとまっています。FormGroupを作る時に、FormControlの２つ目の引数として設定することができます。
export class FormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit(): void {
this.form = this.createForm()
}
createForm(): FormGroup {
return this.fb.group({
name: ['', [Validators.required, Validators.maxLength(10)]
});
}
get name(): FormControl {
return this.form.get('name') as FormControl
}
}
ここでは、入力必須と最大文字数のバリデーションをかけています。もしユーザーが文字数制限を超えてしまった場合、何かしらのエラーメッセージを出力したいというケースがあると思います。公式ガイドでは下記のようにnameがエラーだった場合に*ngIfで表示する方法が紹介されています。
<div>名前：<input formControlName="name"></div>
<div *ngIf="name.errors.maxlength">
１０文字以内で入力してください
</div>
バリデーションを実装した場合、最大文字数を上回ると{maxlength: {requiredLength: 10, actualLength:11}}というkeyとvalueが返ります。なければnullです。name.errors.maxlengthはtrueとなるため、その場合だけ上記のエラーメッセージは出力されます。
2. カスタムバリデータを実装する
次にプロジェクト独自のバリデーションをかけたい時の実装例です。簡単な方法としてクラス内部に関数を定義する方法をご紹介します。
例：半角や全角のみの入力を許容しないバリデーション
export class FormComponent implements OnInit {
...
createForm(): FormGroup {
return this.fb.group({
name: ['', [
Validators.required,
Validators.maxLength(5),
//組み込みバリデータと同じように設定できる
this.forbiddenOnlyWhiteSpace]],
color: ['']
}, {
validators: CustomValidator.requiredSelectForm
})
}
forbiddenOnlyWhiteSpace(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
const originalValue = String(control.value);
const replacedValue = originalValue.replace(/\s+/g, '');
if (originalValue.length > 0 && replacedValue.length == 0) {
return {'forbiddenOnlyWhiteSpace': control.value}
} else {
return null
}
}
}
}
厳密にはValidatorFnで返さなくても実装できます。組み込みのバリデータと同じように、バリデーションがかかった場合にはname.errors.forbiddenOnlyWhiteSpaceがtrueになるため、エラーハンドリングすることができます。
3. クロスフィールドバリデーションを実装する
あるフォームの状態によって、別のフォームのバリデーションをかけたい場合もあると思います。例えば、資格の有無のチェックボックスがtrueの時だけ、資格名を必須で入力させるケースなどです。
カスタムバリデータを.groupの2番目の引数として設定することで、この関数はFormGroupを引数に受け取れるようになります。後は.get(FormControl名)で必要な値を取り出して、バリデーションをセットします。
export class FormComponent implements OnInit {
...
createForm(): FormGroup {
return this.fb.group({
name: ['', [
Validators.required,
Validators.maxLength(5),
CustomValidator.forbiddenOnlyBlank]],
color: [''],
hasSkill: ['false', [Validators.required]],
skillName: ['']
}, {
//.groupの第２引数に関数をセットすることでFormGroupを受け取れる
validators: [this.skillNameRequired]
})
}
skillNameRequired(control: FormGroup) {
const hasSkill = control.get('hasSkill');
const skillName = control.get('skillName');
return hasSkill ? skillName.setValidators(Validators.required) : skillName.clearValidators();
}
}
まとめ
いかがだったでしょうか？
Angularでアプリケーションを開発するにあたり、実装することが多い箇所なので公式ドキュメントを一度じっくり読んでみるのをオススメします！