Angular 6: 无法读取未定义的 属性 'get'

Question

我正在练习 Angular，当我尝试使用“Build-in 验证器”时遇到问题。我尝试将表单字段的值作为参数传递，但是当我尝试这样做时，我只是在标题中出现错误“无法读取未定义的 属性 'get'”：

form.component.ts

this.form = new FormGroup({
      'name': new FormControl(this.name, [
        Validators.required,
        Validators.minLength(4),
        forbiddenNameValidator(this.name)
      ]),
      'alterEgo': new FormControl(this.alterEgo),
      'power': new FormControl(this.power, Validators.required)
    });

...更多代码...

get name(): string { return this.form.get('name').value };
get power(): string { return this.form.get('power').value };

当我尝试将 forbiddenNameValidator (this.name) 方法作为参数发送时，出现该错误。

form.component.html

<form [formGroup]="form" (ngSubmit)="Ver()">
<div class="form-group">
   <label for="name">Name</label>
   <input type="text" class="form-control" name="name" formControlName="name">
</div>
</form>

这是我得到的错误：

Answer 1

将 [formGroup]="form" 添加到您的 HTML 表单

<div class="form-group" [formGroup]="form">
   <label for="name">Name</label>
   <input type="text" class="form-control" name="name" formControlName="name">
</div>

否则Angular将不知道将表单绑定到什么，这类似于您需要为每个控件添加的formControlName="name"。 form-group class 纯粹用于造型。