Как получить реактивную форму и проверить, действительны ли в директиве, прежде чем применять директиву? - PullRequest
Новая
       69

Как получить реактивную форму и проверить, действительны ли в директиве, прежде чем применять директиву?

0 голосов
/ 13 марта 2020

У меня есть форма, которая отправляет свои данные на сервер для проверки. Если бэкэнд выдает ошибку типа «Адрес уже существует», он будет отображаться в форме.

Проблема в том, что когда я нажимаю кнопку «Сохранить», директива изменит цвет и текст на 'сохранено' перед ожиданием ответа от бэкэнда.

Как мне дождаться ответа от бэкэнда перед реализацией директивы? Можно ли как-то перехватить и «приостановить» событие от достижения кнопки? 

 <form method="post" #form="ngForm" name="myAddressForm"  [ngClass]="{ submitted: submitted }"
        (ngSubmit)="createAddress(form)" name="myAddressForm" [checkValid]>
        <div class="form-group">
           <label class="label">Address</label>
           <input #address_1="ngModel" name="address_1 [(ngModel)]="payload.addressData.address_1" type="text"
                   [appFormError]="address_1" class="form-control" required />
        </div>
        <div class="col-lg-2 col-md-6 col-12">
          <button class="btn btn-block btn-black btn-card" appSaveButton>save</button>
        </div>
    </div>
  </form>

и ниже моя директива 

import { Directive, HostListener, ElementRef, Renderer2 } from '@angular/core';

@Directive({
    selector: '[appSaveButton]'
})
export class SaveButtonDirective {
    public saveButton;

    constructor(private el: ElementRef, private renderer: Renderer2) {
        this.saveButton = this.el.nativeElement;
    }

    @HostListener('click') onMouseClick(): void {
        // Check to see if form is valid

        // Get a reference to the form

        // If valid, change the button display

        // Else, do nothing.
        this.changeButtonDisplay('#0065c5', 'saved');
    }

    @HostListener('document:click', ['$event']) onClick(event): void {
        if (this.saveButton !== event.target) {
            this.changeButtonDisplay('black', 'save');
        }
    }

    changeButtonDisplay(color = 'black', text = 'save') {
        this.renderer.setStyle(this.saveButton, 'backgroundColor', color);
        this.renderer.setStyle(this.saveButton, 'borderColor', color);
        this.renderer.setProperty(this.el.nativeElement, 'innerHTML', text);
    }
}
...