Question

希望熟悉Angular的人快速浏览一下我的语法。

form.component.html：

<div class="row"> <div class="col-md-6 col-sm-6 col-xs-11" style=" margin-top: 7px;"> <span id="hamburger-icon" onclick="openNav()" style="vertical-align: middle; opacity: 1; font-size: 28px; margin-right: 15px;">☰</span> <img class=" logo-img-big local-logo-img-big" src="#">Logo here </div> </div> <div id="mySidenav" class="sidenav"> <div class="container"> <div class="row"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>  <button class="dropdown-btn"> <span><i class="fa fa-caret-down"></i>button</span> </button> <ul> <li>one</li> <li>two</li> </ul> </div> </div> </div>

rule.component.ts：

(click)="onSubmit(ruleForm)"

rule.service.ts：

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

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

我试图仅在成功提交时重置表单和规则模型（但在失败时保留表单状态）。对Angular来说还很新。我试图向下传递NgForm对象本身，并将newRule函数向下传递给服务。

这适用于页面上的“清除表单”按钮-但方式要简单得多。

将newRule传递给rule.service时，出现错误：

  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
  });
});
}

我认为这是对newRule函数中this.rule的引用，当从rule.component内部调用时，此函数工作正常，但从服务中调用时找不到“ this.rule”。

我应该包括该规则是公开宣布的：

rule.component.ts：

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

有关此语法的任何指导将不胜感激。

更新：每个请求添加data-rules.component

public rule: Rule;

Answer 1

我强烈建议使用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();
  }
}

Answer 2

问题

问题在于以下代码段中使用了关键字this。

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

您正在newRule中定义函数DataRulesComponent，并在DataRulesService中调用此函数，因为上下文（this）已更改。当您在newRule中调用DataRulesService函数时，在没有this变量的地方，DataRulesService将引用DataRulesComponent而不是rule。这就是为什么您遇到undefined错误的原因。

修复

此newRule函数的主要目标是reset和value对象的rule。因此，通过在form类中创建新函数reset，以不同的方式实现相同的功能。

步骤1

Rule

步骤2

由于您已经传递了class Rule{ public reset(rule) { rule.ruleName = ''; rule.sqlQuery =''; rule.description = ''; rule.frequency = ''; rule.emailAddressList = ''; rule.documentation = ''; } }，因此不需要附加参数rule

更改

newRule

到

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

步骤3

最后一个将在this.dataRulesService.createRuleRequest(this.rule, form);的{{1}}函数中。只需删除最后一个参数

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错误。请纠正自己。

成功提交后重置角形

2 个答案:

问题

修复

步骤1

步骤2

步骤3