Кнопка включения / выключения в угловой форме на основе ответа API

#angular #angular-reactive-forms #form-submit

#angular #угловые реактивные формы #форма-отправить

Вопрос:

Я использую Angular8 с реактивной формой. Изначально я отключаю кнопку отправки, пока вся форма не будет заполнена действительными данными.

 <div>
  <form>
     ...........
  </for>
  <button [disabled]="(checkifSaveEnabled() amp;amp; !formCreateNewPlan.valid)" 
       (click)="createNewPlan()">Save</button>
</div>

В файле класса (TS):

 checkifSaveEnabled() {
  if (this.formCreateNewPlan.pristine || !this.formCreateNewPlan.valid) {
    return true;
  }
  return false;
}

createNewPlan(): void {
   this.submitted = true;
   this.myservice.create(this.formCreateNewPlan.value).subscribe(result => {
   if (result.success amp;amp; result.data.planId > 0) {
      ... 
   }
}

Здесь все работает нормально. Но я хочу отключить кнопку при отправке (чтобы избежать нескольких кликов) и включить ее обратно, если я получу какие-либо ошибки из ответа моего сервиса (API). Как этого добиться?

Ответ №1:

Вы можете использовать submitted , что будет true, если API выполняется, и станет false, если API разрешит или отклонит. Теперь вы можете использовать оператор finalize для установки submitted внутри него значения false. Она будет выполнена после успешного или ошибочного блока observable.

 createNewPlan(): void {
   this.submitted = true;
   this.myservice.create(this.formCreateNewPlan.value)
.pipe(finalize(() => { this.submitted = false; }))
.subscribe(result => {
   if (result.success amp;amp; result.data.planId > 0) {
   }

}, (error) => {
  console.log(error)
});

Соответствующее изменение в шаблоне

 <button [disabled]="submitted || (checkifSaveEnabled() amp;amp; !formCreateNewPlan.valid)" 
       (click)="createNewPlan()">Save</button>

1. при отправке кнопка теперь отключается. Если я получаю сообщение об ошибке сервера «Дублирующая запись», и я хочу это исправить, как повторно включить ее после исправления значений в форме?

2. Я не понял вашу точку зрения. После успешного или ошибочного ответа кнопка будет включена автоматически из-за кода, написанного внутри блока finalize. Пожалуйста, дайте мне знать, если я что-то здесь пропустил.

Ответ №2:

вам просто нужно добавить this.submitted ее в атрибут disabled кнопки, см. Код ниже

 <button [disabled]="submitted || (checkifSaveEnabled() amp;amp; !formCreateNewPlan.valid)" 
       (click)="createNewPlan()">Save</button>

1. при отправке кнопка теперь отключается. Если я получаю сообщение об ошибке сервера и хочу это исправить, как повторно включить его после исправления значений в форме?

2. после ответа сервера, который вы можете сделать this.submitted=false (как в случае успеха, так и в случае ошибки), это позволит включить кнопку

3. но она включается сразу после получения ошибки. Она должна включиться после внесения исправлений в форму

4. затем в этом случае измените || на amp;amp;

5. ОК… понял вашу проблему… вы можете оставить || все как есть и вызвать метод проверки формы после ответа сервера и в соответствии с ответом make this.submitted=false … надеюсь, это должно помочь