Как я могу остановить активацию проверки реактивной формы angular при нажатии кнопки закрытия? - PullRequest
Новая
       85

Как я могу остановить активацию проверки реактивной формы angular при нажатии кнопки закрытия?

0 голосов
/ 29 апреля 2020

У меня есть реактивная форма в модальном всплывающем окне, но когда я впервые открываю модальное поле, обязательное поле имеет фокус. Когда я нажимаю на кнопку закрытия, проверка запускается (я думаю, что теряю фокус), и отображает необходимое сообщение проверки поля, но кнопка не нажимает ie. код за кнопкой не запускается. Если вы нажмете на нее еще раз, все будет работать нормально.

Это соответствующие биты файла TS: 

  ngOnInit() {
    this.addPaymentForm = this.formBuilder.group({
      jobId: ['', [Validators.required, Validators.maxLength(9)]],
      grossAmount:  ['', [Validators.required, Validators.max(10000), Validators.min(-10000)]]
    });
  }

  get f() { return this.addPaymentForm.controls; }

  close() {
    this.activeModal.close({ dataModified: false });
  }

И это html: 

<form [formGroup]="addPaymentForm" (ngSubmit)="submit()">
    <label for="jobId">Job Id</label>
    <input type="number" id="jobId" class="form-control" formControlName="jobId" required>
    <div *ngIf="f.jobId.invalid && (f.jobId.dirty || f.jobId.touched)" class="alert alert-danger mt-2">
        <div *ngIf="f.jobId.errors.required">
            Job Id is required
        </div>
        <div *ngIf="f.jobId.errors.maxlength">
            Invalid Job Id
        </div>
    </div>

    <label for="grossAmount">Gross Amount</label>
    <input id="grossAmount" type="number" class="form-control" formControlName="grossAmount" required>
    <div *ngIf="f.grossAmount.invalid && (f.grossAmount.dirty || f.grossAmount.touched)"
        class="alert alert-danger mt-2">
        <div *ngIf="f.grossAmount.errors.required">
            Gross Amount is required
        </div>
        <div *ngIf="f.grossAmount.errors.max || f.grossAmount.errors.min">
            Invalid Gross Amount
        </div>
    </div>
    <button type="button" class="btn btn-outline-dark" [disabled]="submitting" (click)="close()">Close</button>
    <button type="submit" class="btn btn-primary"
        [disabled]="!addPaymentForm.valid || !jobDetail || submitting">{{ submitting ? "Please wait" : "Save"}}</button>
    </div>
</form>

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

РЕДАКТИРОВАТЬ: ОК. Я создал стек для бликов, чтобы продемонстрировать проблему. https://stackblitz.com/edit/angular-ng-bootstrap-modal-content-4e9fac Кажется, что он работает лучше, чем мой настоящий код, хотя поле JobId не фокусируется автоматически на этом примере, поэтому, пожалуйста, нажмите на поле JobId, когда появится модальное окно, чтобы смоделировать мою ситуацию. Не уверен, почему поле в моем коде находится в фокусе, я думаю, что это связано с разницей версий с ng- bootstrap, возможно, если бы я мог изменить это, тогда это не было бы проблемой.

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Ваши мысли здесь верны: проверка запускает событие размытия в тот момент, когда вы нажимаете кнопку Cancel.

На экране появляется новый блок проверки, а кнопка Cancel смещается ниже. Поскольку оно смещено, событие click не вызывается.

Существует множество способов его решения:

1) Используйте событие mousedown вместо click, чтобы событие размытия выиграло не происходит 

<button type="button" ... (mousedown)="close()">Close</button>

Разветвленный стек

2) Проверка триггера только при отправке

3) Удалить блоки ошибок из основного потока (например, установите их абсолютное положение), чтобы они не сдвигались Cancel кнопка

0 голосов
/ 29 апреля 2020

ОК, частичный ответ такой. Чтобы вывести фокус из поля ввода, мне просто нужно было добавить атрибут ngbAutofocus к одной из кнопок, чтобы они были в фокусе. Это новая sh функция ng- bootstrap, поэтому она не работает в моем стеке.

https://github.com/ng-bootstrap/ng-bootstrap/issues/2728

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

...