Реактивные формы - пропустить проверку при отмене

У меня есть реактивная форма с кнопками «Отменить» и «Отправить»:

<button (click)="cancel($event)" type="button" class="ui button">Cancel</button>
<button [disabled]="..." type="submit" class="ui button primary">Store</button>

и теперь, если я нажимаю кнопку «Отправить» («Сохранить»), срабатывает проверка - все в порядке. Но если я нажму «Отмена», это также вызовет проверку. Интересно, почему? Мне не нужна проверка на отмену. Что мне нужно сделать, чтобы его выключить?


angular angular-validation
person alvipeo    schedule 16.09.2017    source источник
comment
Форма инкапсулирована модальным окном или чем-то еще? Каково ожидаемое поведение, когда пользователь нажимает кнопку "Отмена"?   -  person joshrathke    schedule 16.09.2017
comment
Есть защита роутера, но в остальном это просто форма. Я бы хотел нажать "Отмена", вообще не касаться проверки   -  person alvipeo    schedule 16.09.2017
comment
Используйте как (mousedown), так и (click).   -  person Doug Domeny    schedule 21.12.2020

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете просто «сбросить» formControl в родительском formGroup при нажатии кнопки отмены, если это вас устраивает.

cancel() {
 this.form.reset();
}
person amal    schedule 16.09.2017

arrow_upward
1
arrow_downward

Он работает с event.preventDefault ()

<button (click)="cancel($event)">Cancel</button>

cancel(event) {
    event.preventDefault()
}
person Boris    schedule 20.03.2018
comment
Я предпочитаю это решение другим. Это также действительно помогает, если вы ищете такие кнопки, как, + или - (для удаления элементов из списка) для запуска проверки формы. И, похоже, у него нет никаких нежелательных побочных эффектов! - person Nick Betcher; 14.10.2020

arrow_upward
0
arrow_downward

Я бы повторно инициализировал FormGroup при нажатии кнопки Cancel. Это полностью сотрет форму и заставит все входные состояния снова вернуться в исходное состояние. Вы должны использовать состояния ввода, чтобы проверить, использовались ли они или нет, если вы еще этого не сделали. Это предотвратит запуск проверки на вводе формы, который еще не использовался.

Компонент

constructor() {
    this.Form = initForm();
}

initForm() {
    return this._FormBuilder.group({
        fieldOne: ['', Validators.required]
    })
}

Ввод

 <div class="ui input" [class.error]="Form.get('fieldOne').dirty && !Form.get('fieldOne').valid">
  <input type="text" placeholder="Search..." formControlName="fieldOne">
</div>

Кнопка

<button (click)="initForm()" type="button" class="ui button">Cancel</button>

P.S. похоже, что вы используете семантический интерфейс, поэтому мой HTML отформатирован соответствующим образом. Если нет, вам нужно его немного переделать.

person joshrathke    schedule 16.09.2017