Question

我正在关注一个关于反应形式的Angular 4教程。在使用FormGroup和FormControl指令时，我发现了一个不一致的地方 -

<form [formGroup]="formObj">
<div class="form-group">
<input formControlName="username">

它在方括号下应用[formGroup]指令而不使用方括号的formControlName指令。

我在这里缺少什么？

Answer 1

如果您的指令mydir包含输入mydir：

@Directive(...)
export class MyDir {
   @Input() mydir;

可以使用或不使用括号：

<span mydir="exp">...</span>
<span [mydir]="exp">...</span>

在第一种情况下，mydir绑定的值将是字符串exp：

export class MyDir {
   @Input() mydir;
   ngOnInit() {
      console.log(this.mydir); // "exp"

在第二种情况下，表达式将被评估为父组件包含的任何exp：

@Component(template: `<span mydir="exp"`)
class Parent {
    exp = 'hello';

export class MyDir {
   @Input() mydir;
   ngOnInit() {
      console.log(this.mydir); // "hello"

现在，使用表单指令。

formGroup需要FormGroup类的实例。如果不使用[]，则指令将获取字符串formObj而不是对象。

formControlName需要一个字符串，该字符串是在父表单组中查找的控件名称。这就是没有括号的原因。

Answer 2

很好的问题，对Angular来说很重要：指令（例如formGroup或formControlName）可以在正常写入时设置为等于字符串，或者用方括号括起来设置为等于组件TypeScript中的值。

因此ionViewDidEnter() { let input = <HTMLInputElement>document.querySelector('.scoreboardus input'); input.addEventListener('change', (event) => { console.log("onChange function fired"); //Your onChange function here. Do what you want this.text = event.target["value"]; }) //Now we try to change your input value by javascript setTimeout(() => { input.value = "Hey. Im changing"; //Trigger onChange function manually var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); input.dispatchEvent(evt); console.log("I'm done"); }, 3000) }将formGroup指令设置为等于实际的动态对象，而[formGroup]="formObj"设置为等于字符串“name”

为什么我们将[formGroup]指令应用于方括号下的表单，而对于表单字段，我们应用不带方括号的formControlName指令？

2 个答案: