Angular 6 : Cannot read property 'get' of undefined

Question

我正在练习 Angular，当我尝试使用“内置验证器”时遇到问题。我尝试将表单字段的值作为参数传递，但是当我尝试这样做时，我只是出现标题“无法读取未定义的属性'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 };

当我尝试将bannedNameValidator (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 将不知道将表单绑定(bind)到什么，这类似于您需要为每个控件添加的 formControlName="name" 。 form-group 类纯粹用于样式设置。