Сброс угловой формы при успешной отправке

Question

Надеюсь, что кто-то, знакомый с Angular, быстро ознакомится с моим синтаксисом.

Form.component.html :

(click)="onSubmit(ruleForm)"

Rule.component.ts :

onSubmit(form: NgForm) {
this.dataRulesService.createRuleRequest(this.rule, form, this.newRule);
}

newRule(form: NgForm) {
this.rule = {
  //model is reset
};
form ? form.reset() : null;
}

Rule.service.ts :

  public createRuleRequest(rule: Rule, form: NgForm, newRule: (form: NgForm) 
=> any) {
//logic
this._postCreateRuleRequest(rule, form, newRule);
}

private _postCreateRuleRequest(rule: Rule, form: NgForm, newRule: (form: 
NgForm) => any) {
this.http.post(`${environment.API_URL}rules/create`, 
 rule).subscribe((response: any) => {
  //success logic
  });
  newRule(form);
 }, () => {
 //failure logic
  });
});
}

Я пытаюсь сбросить форму и модель правил только при успешной отправке (но сохраняю состояние формы при сбое). Довольно новичок в Angular. Я попытался передать сам объект NgForm и передать функцию newRule службе.

Это работает с кнопкой «Очистить форму» на странице, но гораздо проще.

При передаче newRule в rule.service я получаю сообщение об ошибке:

vendor.bundle.js:54437 ERROR TypeError: Cannot set property 'rule' of 
undefined
at webpackJsonp../src/app/components/data-rules/data- 
rules.component.ts.DataRulesComponent.newRule

Я предполагаю, что это ссылка на this.rule в функции newRule, которая отлично работает при вызове из компонента rule.component, но не может найти this.rule при вызове из службы.

Я должен указать, что правило объявляется публично:

Rule.component.ts :

public rule: Rule;

Любые указания по этому синтаксису будут оценены.

Обновление: добавление data-rules.component для каждого запроса

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataRulesService } from './data-rules.service';
import { Rule }    from './rule';
import { NgForm } from '@angular/forms';

@Component({
selector: 'app-data-rules',
templateUrl: './data-rules.component.html',
styleUrls: ['./data-rules.component.scss']
})
export class DataRulesComponent implements OnInit {

public rule: Rule;

constructor(private http: HttpClient, private dataRulesService: 
DataRulesService) { }

ngOnInit() {
this.newRule(null);
}

onSubmit(form: NgForm) {
this.dataRulesService.createRuleRequest(this.rule, form, this.newRule);
}

newRule(form: NgForm) {
this.rule = {
ruleName: '',
sqlQuery: '',
description: '',
frequency: '',
emailAddressList: '',
documentation: ''
};
form ? form.reset() : null;
}
}

angular

0

8t12c7081 22 Окт 2018 в 19:18

Answer 1

вопрос

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

newRule(form: NgForm) {
   this.rule = {
   ruleName: '',
   sqlQuery: '',
   description: '',
   frequency: '',
   emailAddressList: '',
   documentation: ''
}

Вы определяете функцию newRule в DataRulesComponent и вызываете эту функцию в DataRulesService, из-за чего контекст (this) изменяется. Когда вы вызываете функцию newRule в DataRulesService, this будет ссылаться на DataRulesService, а не на DataRulesComponent, если у вас нет переменной rule. Вот почему вы получаете ошибку undefined.

Fix

Основная цель этой функции newRule - reset value объектов rule и form. Итак, давайте реализуем то же самое по-другому, создав новую функцию reset в классе Rule.

Шаг 1

class Rule{

   public reset(rule) {
       rule.ruleName =  '';
       rule.sqlQuery ='';
       rule.description = '';
       rule.frequency = '';
       rule.emailAddressList = '';
       rule.documentation = '';
    }
}

Шаг 2

Поскольку вы уже передаете rule, нет необходимости в дополнительном параметре newRule

+ Изменить

this.dataRulesService.createRuleRequest(this.rule, form, this.newRule);

Кому

this.dataRulesService.createRuleRequest(this.rule, form);

Шаг 3

Последний будет в функции createRuleRequest от DataRulesService. Просто удалите последний параметр

createRuleRequest(rule, form){
  ...
  rule.reset(rule); //it will reset rule.
  form.reset(); // reset the form
  ..
  //Above code will replace the function newRule(); 

}

Примечание. Я написал код непосредственно в stackoverflow editor, поэтому могли возникнуть ошибки typo и syntactical. Пожалуйста, поправьтесь.

0

Sunil Singh 23 Окт 2018 в 05:23

Answer 2

Я настоятельно рекомендую использовать реактивные формы Angular. https://angular.io/guide/reactive-forms. Это делает файл component.ts единственным источником достоверной информации для формы вместо шаблона. Вы можете сделать что-то вроде этого:

import { FormGroup, FormBuilder } from '@angular/forms';
import { OnInit } from '@angular/core';

export class SomeComponent implements OnInit {

  myForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private service: RuleService
  ) { }

  ngOnInit() {
    this.buildForm();
  }

  buildForm() {
    this.myForm = this.fb.group({
      rule: '',
      someOtherControl: null,
      andAnother: ''
    });
  }

  onSubmit() {
    this.service.createRuleRequest(this.myForm.value);
    this.myForm.reset();
  }
}

0

Mitch McCutchen 22 Окт 2018 в 17:06