FormGroup对象的控件和get方法之间有什么区别?

时间:2018-08-23 15:44:37

标签: javascript angular typescript angular-reactive-forms

我有两行代码几乎可以完成相同的工作:

this.data.affiliateLinkUrl = this.bookLinkForm.controls['affiliateLinkUrl'].value;


this.data.affiliateLinkUrl = this.bookLinkForm.get('affiliateLinkUrl').value;

然而,第二个原因导致在上方使用MatDialogRef引用调用方法时使用此代码时,MatDialogRef对象突然变得不确定。以下是代码段供参考:

      if(status.success){
        this.notificationService.notify('success','Success', status.info);
        this.data.title = this.bookLinkForm.controls['title'].value;
        this.data.content = this.bookLinkForm.controls['content'].value;
        this.data.affiliateLinkUrl = this.bookLinkForm.get('affiliateLinkUrl').value;
        this.dialogRef.close(this.data);
      }

当我通过这种方式获取affiliateLinkUrl时,当我使用控件方法时,DialogRef突然变得不确定,而一切都很好。没有其他错误可以解释这一点。 dialogRef对象在构造函数中初始化。

有人能告诉我是什么原因造成的吗?controlsget方法之间的区别是什么?

1 个答案:

答案 0 :(得分:1)

根据您的问题“方法控件和获取方法之间有什么区别?”

来自AbstractControl source code

  /**
   * Retrieves a child control given the control's name or path.
   * @param path A dot-delimited string or array of string/number values that define the path to the
   * control.
   * ### Retrieve a nested control
   * For example, to get a `name` control nested within a `person` sub-group:
   * * `this.form.get('person.name');`
   * -OR-
   * * `this.form.get(['person', 'name']);`
   */
  get(path: Array<string|number>|string): AbstractControl|null { return _find(this, path, '.'); }

来自FormGroup上的Angular.io文档:

constructor(controls: {
    [key: string]: AbstractControl;
}, validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null)

controls:子控件的集合。每个孩子的钥匙是孩子注册的名字。

我认为现在的区别很明显:)