Блог

Angular: условно запускает выборочные проверки формы

Я использую реактивную форму с проверками — ‘required’ и другими, такими как min, max и т.д. Для полей формы. В форме есть две кнопки — «Сохранить» и «Отправить». События на кнопках Сохранить и Отправить сохранят данные в промежуточное состояние и отправят их соответственно в соответствии с внутренней логикой.

Что касается кнопки отправки, я отключил ее до тех пор, пока форма не станет действительной, привязав свойство disabled attribute к недопустимому состоянию формы. Что касается кнопки Сохранения, мне нужно отключить ее, если поля недействительны в соответствии с определенными проверками, за исключением проверки ‘required’. Это делается для проверки, не введены ли какие-либо недопустимые входные данные.

Например, рассмотрим следующую форму

 this.registerForm = this.formBuilder.group({
    name: [''],
    email: ['', [Validators.required, Validators.email]],
})
  

В этом случае мне нужно отключить кнопку, если в поле введен неверный ввод, но включить ее, если оно оставлено пустым, то есть игнорировать «обязательную» проверку. «Обязательная» проверка требуется для отключения другой кнопки, то есть кнопки отправки.

Как добиться таких выборочных проверок для разных кнопок?

Итак, в основном я реализовал это с использованием двух разных методов, поскольку у вас есть средства проверки только для email поля, вы можете просто проверить это напрямую, более того, вы можете проверить, какие именно ошибки в нем есть, вот что я использовал:

   get isSaveValid(): boolean {
    let emailControl = this.registerForm.get('email');
    return emailControl.valid || 
      emailControl.hasError('required') amp;amp;
      Object.keys(emailControl.errors).length === 1;
  }

  get isSubmitValid(): boolean {
    let emailControl = this.registerForm.get('email');
    return emailControl.valid;
  }
  

и привязки:

   <button [disabled]="!isSaveValid">Save</button>
  <button [disabled]="!isSubmitValid">Submit</button>
  

IsSaveValid() только true когда emailControl допустимо или когда в нем есть required ошибка, и это единственная ошибка. Другими словами, пользователь сможет сохранить обход требуемого ограничения, но все остальные средства проверки будут работать (как email , например).
В stackblitz есть пример. Надеюсь, это поможет!

Другой способ — настроить всю вашу форму без необходимых валидаторов. Затем подписаться на:

 this.registerForm.valueChanges.subscribe(val => {
  console.log(`Name is ${val.name} email is ${val.email}.`);
});
  

Это будет вызываться каждый раз, когда пользователь вносит какие-либо изменения. Здесь вы можете выполнить простую обязательную проверку следующим образом:

 if (val.name amp;amp; val.email) { // simply to get is there any input (for required fields)
    this.submitValid = true;
}
  

В вашем html вы все еще можете привязаться к RegisterForm.valid, но для кнопки сохранения. Для кнопки отправки привязать к «submitValid».