无法以与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>
无法读取未定义的属性“无效”
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),
});
}
它会抛出错误,因为您没有名为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">
您可以使用表单组并在控制器中定义相应的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)添加吸气剂
get username() { return this.myForm.get('username'); }
get password() { return this.myForm.get('password'); }
在模板中:
1)使用[formGroup] =“MyForm”添加父div
<div [formGroup]="myForm">
...
</div>
2)为forcontrolName = username更改[formControl] =“usernameCtrl”,为* ngIf =“username.invalid”更改* ngIf =“usernameCtrl.invalid”
<input type="text"
name="username"
class="form-control"
formControlName="username">
<div *ngIf="username.invalid" class="alert alert-danger">
username is required
</div>
3)为forcontrolName = password更改[formControl] =“passwordCtrl”,为* ngIf =“password.invalid”te更改* ngIf =“passwordCtrl.invalid”。
<input type="text"
name="password"
class="form-control"
formControlName="password">
<div *ngIf="password.invalid" class="alert alert-danger">
password is required
</div>
对我来说工作:
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>