Question

无法以与Angular文档相同的方式访问它，因此必须首先获取FormGroup实例并在那里找到FormControl实例。我想知道为什么？这个例子有效：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="myForm.controls.username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

虽然这会引发错误（仅在* ngIf语句中这些之间存在差异）：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

无法阅读财产＆＃39;无效＆＃39;未定义的

form.component：

import {Component} from '@angular/core';
import {FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'sign-up',
  templateUrl: 'app/sign-up.component.html'
})

export class SignUpComponent {

  myForm = new FormGroup({
    username: new FormControl('username', Validators.required),
    password: new FormControl('', Validators.required),
  });
}

Answer 1

它会抛出错误，因为您没有名为username或password的变量。

为了解决这个问题，您可以执行以下操作：

export class SignUpComponent implements OnInit {

  myForm: FormGroup;
  usernameCtrl: FormControl;
  passwordCtrl: FormControl;

  ngOnInit() {
    this.usernameCtrl = new FormControl('username', Validators.required);
    this.passwordCtrl = new FormControl('', Validators.required);

    this.myForm = new FormGroup({
      username: this.usernameCtrl,
      password: this.passwordCtrl
    });
  }
}

...或使用FormBuilder：

export class SignUpComponent implements OnInit {

  myForm: FormGroup;
  usernameCtrl: FormControl;
  passwordCtrl: FormControl;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.usernameCtrl = this.formBuilder.control('username', Validators.required);
    this.passwordCtrl = this.formBuilder.control('', Validators.required);

    this.myForm = this.formBuilder.group({
      username: this.usernameCtrl,
      password: this.passwordCtrl
    });
  }
}

现在您可以直接在模板中使用它，如下所示：

<div class="alert alert-danger" *ngIf="usernameCtrl.invalid">
  username is required
</div>

此外，如果您愿意，可以使用[formControl]代替formControlName：

<input 
  type="text"
  name="username"
  class="form-control"
  [formControl]="usernameCtrl">

PLUNKER

Answer 2

您可以使用表单组并在控制器中定义相应的getter来解决此问题。为了实现这一目标：

在控制器中：

1）删除表单控件变量定义和初始化

usernameCtrl: FormControl;
passwordCtrl: FormControl;
...
this.usernameCtrl = this.formBuilder.control('username',Validators.required);
this.passwordCtrl = this.formBuilder.control('', Validators.required);

2）将表单组初始化更改为此

ngOnInit() {
this.myForm = this.formBuilder.group({
  username: ['usename', Validators.required]
  password: ['', Validators.required]
});

}

3）添加getters

get username() { return this.myForm.get('username'); }
get password() { return this.myForm.get('password'); }

在模板中：

1）使用[formGroup] =＆＃34; MyForm＆＃34;

添加父div

<div [formGroup]="myForm">
...
</div>

2）改变[formControl] =＆＃34; usernameCtrl＆＃34; for forcontrolName = username and * ngIf =＆＃34; usernameCtrl.invalid＆＃34; for * ngIf =＆＃34; username.invalid＆＃34;

<input type="text"
       name="username"
       class="form-control"
       formControlName="username">
  <div *ngIf="username.invalid" class="alert alert-danger"> 
    username is required
  </div>

3）改变[formControl] =＆＃34; passwordCtrl＆＃34; for forcontrolName = password and * ngIf =＆＃34; passwordCtrl.invalid＆＃34; for * ngIf =＆＃34; password.invalid＆＃34; TE。

<input type="text"
       name="password"
       class="form-control"
       formControlName="password">
  <div *ngIf="password.invalid" class="alert alert-danger">
    password is required
  </div>

<强> Plunker

Answer 3

对我来说有用：

form.component：

getFormControl(name) {
    return this.Form.get(name);
}

模板：

<input 
  type="text"
  name="username"
  class="form-control"
  formControlName="username"
>
<div *ngIf="getFormControl('username').invalid" class="alert alert-danger">
  username is required
</div>

Answer 4

我遇到了同样的问题，我在“ myForm.controls ....”中添加了“ this”。这对我有帮助。

代替：

<div *ngIf="myForm.controls.username.invalid" class="alert alert-danger">
      username is required
 </div>

执行：

 <div *ngIf="this.myForm.controls.username.invalid" class="alert alert-danger">
      username is required
 </div>

希望这对您有所帮助。

Answer 5

在ts文件中添加：

get username() { return this.myForm.get('username'); }
get password() { return this.myForm.get('password'); } }

Answer 6

实际上，我只是 Angular 的新手，我只使用了一个月，也在寻找一些答案，呵呵，但在您的组件中添加这样的 getter：

export class SignUpComponent {

 myForm = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required),
  });

get username(){
  return this.myForm.controls['username'];
}

}

无法直接访问FormControl实例。无法阅读属性＆＃39;无效＆＃39;未定义的

6 个答案: