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

Question

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

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

Для кнопки «Отправить» я отключил ее до тех пор, пока форма не будет действительной, привязка атрибута свойства отключена к форме недействительнойгосударство.Для кнопки «Сохранить» мне нужно отключить ее, если поля недействительны в соответствии с определенными валидациями, за исключением «обязательной» валидации.Это делается для проверки, введены ли какие-либо недопустимые входные данные.

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

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

  get isSaveValid(): boolean {
    let emailControl = this.registerForm.get('email');
    return emailControl.valid || 
      emailControl.hasError('required') &&
      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).На стеке есть пример .Надеюсь, это поможет!