Frontender Libs - обзор библиотек JS / CSS

Реактивные формы с AbstractControl в Angular

AbstractControl — это базовый класс для всех контролов. Он предоставляет методы и свойства, которые позволяют управлять состоянием, валидацией и зависимостями полей формы.

Пример:

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

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.form = this.fb.group({
    password: ['', Validators.required],
    confirmPassword: ['']
  });
  this.form.get('confirmPassword')?.setValidators([
    this.matchPasswordsValidator(this.form.get('password'))
  ]);
}
matchPasswordsValidator(passwordControl: AbstractControl | null) {
  return (confirmPasswordControl: AbstractControl) => {
    const password = passwordControl?.value;
    const confirmPassword = confirmPasswordControl.value;

    return password === confirmPassword ? null : { passwordMismatch: true };
  };
}

В этом примере валидатор сравнивает значения password и confirmPassword, автоматически реагируя на изменения первого поля.

👉 @sWebDev

👍5

www.tgoop.com/sWebDev/3379

1.14K viewsDec 23, 2024 at 08:11

Реактивные формы с AbstractControl в Angular

AbstractControl — это базовый класс для всех контролов. Он предоставляет методы и свойства, которые позволяют управлять состоянием, валидацией и зависимостями полей формы.

Пример:

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

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.form = this.fb.group({
    password: ['', Validators.required],
    confirmPassword: ['']
  });
  this.form.get('confirmPassword')?.setValidators([
    this.matchPasswordsValidator(this.form.get('password'))
  ]);
}
matchPasswordsValidator(passwordControl: AbstractControl | null) {
  return (confirmPasswordControl: AbstractControl) => {
    const password = passwordControl?.value;
    const confirmPassword = confirmPasswordControl.value;

    return password === confirmPassword ? null : { passwordMismatch: true };
  };
}

BY Frontender Libs - обзор библиотек JS / CSS