Угловой: Проверьте, является ли форма действительной извне формы (и покажите сообщения об ошибках) - PullRequest
Новая
       20

Угловой: Проверьте, является ли форма действительной извне формы (и покажите сообщения об ошибках)

0 голосов
/ 19 января 2019

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

Поскольку я на самом деле не отправляю форму, есть ли способ показать те же сообщения проверки, когда пользователь нажимает кнопку за пределами формы?

ОБНОВЛЕНИЕ: Добавлен некоторый код для дальнейшего объяснения isse. Кроме того, я забыл упомянуть, что я использую Material Design для Bootstrap в качестве моей CSS-фреймворка.

Форма HTML (component.html): 

<form class="custom-form p-2">
    <div class="row">
      <div class="col-sm-6">
        <div class="md-form form-sm">
          <input mdbInputDirective type="text" id="title" [(ngModel)]="dataService.catalog.title" name="title"
            value="{{ dataService.catalog.title }}" required [validateSuccess]="false" placeholder=""
            data-error="This field is mandatory" class="form-control">
          <label for="title">Title</label>
        </div>
      </div>
      <div class="col-sm-2">
        <div class="md-form form-sm">
          <input mdbInputDirective type="date" id="date" [ngModel]="dataService.catalog.date | date:'yyyy-MM-dd'"
            name="date" (ngModelChange)="date = $event" required [validateSuccess]="false"
            placeholder="" data-error="This field is mandatory" class="form-control">
          <label for="date">Date</label>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="md-form form-sm">
          <textarea type="text" id="description" [(ngModel)]="dataService.catalog.description" name="description"
            value="{{ dataService.catalog.description }}" required [validateSuccess]="false" placeholder=""
            data-error="This field is mandatory" class="md-textarea form-control" mdbInputDirective rows="3"></textarea>
          <label for="description">Description</label>
        </div>
      </div>
    </div>
</form>

Кнопка HTML (component.html): 

<button mdbBtn type="button" color="success" class="waves-light" size="sm" mdbWavesEffect (click)="create()">
    <i class="fa fa-plus-square mr-sm-2 mr-1"></i> Create Catalog
</button>

Метод создания (component.ts): 

create() {
    //TODO: call the form's own validation method to show the erros?!   

    if(formValid) {
        this.dataService.create(this.dataService.catalog).subscribe(value => {
            console.log(value);
        }, error => {
            console.log(error);
        });
    }   
}

1 Ответ

0 голосов
/ 19 января 2019

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

...