Что такое краткий/чистый способ создания реактивной формы Stongly-Typed с помощью Angular14 с использованием FormBuilder?

Question

Что я пытаюсь сделать...

Я хочу создать строго типизированную реактивную форму в Angular 14. Я просматривал эти два блога:

• Нетанел Базал
• Аджай Оджха

Я также проверил некоторые другие примеры и видео, но все они, казалось, были удобно опущены некоторые детали, например, инициализация FormBuilder.

Что я пробовал до сих пор

После некоторых проб и ошибок мне удалось его инициализировать, и он компилируется:

      private fb: IFormBuilder;

constructor(fb: NonNullableFormBuilder) {
  this.fb = fb as IFormBuilder;
}

Я не совсем уверен, почему это не IFormBuilderи если это нормально, чтобы бросить это так.

У меня также есть функция в моем CustomValidatorsкласс, который принимает значения 2 FormControls, которые я должен проверить, не являются ли они неопределенными (или нулевыми, когда я пытаюсь получить их из form.constrols.passwordвместо form.value.password).

      function compare(password: string | undefined, confirmPassword: string | undefined) {
  return password !== confirmPassword && confirmPassword !== '';
}

Это кажется странным, так как я использую NonNullableFormBuilderи присвойте значениям пустую строку.

Я не был уверен, что задам его здесь или в Code Review , но, хотя он компилируется, я думаю, что делаю это неправильно.

Вот Stackblitz , который я создал, чтобы показать, чего я достиг.

Answer 1

Для каждого элемента управления необходимо указать тип элемента управления.

      export interface PassForm {
  password: FormControl<string>
  confirmPassword: FormControl<string>
}

Затем, поскольку вы используете formBuilder, вы можете пропустить передачу типа в formGroup.

      this.form = this.fb.group(
      {
        password: [
          '',
          [
            Validators.required, 
            Validators.minLength(8),
            Validators.maxLength(100),
          ],
        ],
        confirmPassword: [
          '',
          [
            Validators.required,
            Validators.minLength(8),
            Validators.maxLength(100),
          ],
        ],
      },
      { validator: CustomValidators.MatchingPasswords }
    );

В кастомном валидаторе тоже нужно внести некоторые изменения

      export class CustomValidators {
  static MatchingPasswords(form: IFormGroup<{
    password: string
  confirmPassword: string
  }>) {
    const password = form.value?.password;
    const confirmPassword = form.value?.confirmPassword;
    const currentErrors = form.controls.confirmPassword.errors;
    const confirmControl = form.controls.confirmPassword;

    if (compare(password, confirmPassword)) {
      confirmControl.setErrors({ ...currentErrors, not_matching: true });
    } else {
      confirmControl.setErrors(currentErrors);
    }
  }
}

Разветвленный рабочий пример