我已经设置了一个嵌套的FormGroup。到目前为止,一切都很好。但是我不确定在有嵌套表单元素时如何正确设置验证警报。
发生的一件特殊的事情是在构建过程中我会出错:属性"控件"不存在于类型的" AbstractControl"
这是我的代码:
import { Component, OnInit } from '@angular/core';
import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Reactive Form - Nested FormGroups';
myForm: FormGroup;
constructor(
private fb: FormBuilder
) {}
ngOnInit() {
this.buildForm();
}
buildForm() {
this.myForm = this.fb.group({
user : this.fb.group({
'firstName': new FormControl('', Validators.required),
'lastName': new FormControl('', Validators.required)
}),
'bio': new FormControl()
});
}
}
我的问题是在验证中请参见class ="验证 - 消息"
的div<hello name="{{ name }}"></hello>
<form [formGroup]="myForm">
<div class="my-box" formGroupName="user">
<label>
First Name
<input type="text" formControlName="firstName">
<div class="validation-message" *ngIf="!myForm.controls.user.controls['firstName'].valid && myForm.controls.user.controls['firstName'].dirty">
This field is invalid
</div>
</label>
</div>
<div class="my-box" formGroupName="user">
<label>
Last Name
<input type="text" formControlName="lastName">
</label>
</div>
<div class="my-box">
<label for="bio" class="block-me">Bio</label>
<textarea formControlName="bio"></textarea>
</div>
</form>
<p>
Data from form: {{ myForm.value | json }}
</p>
您在打字稿中有错字:
user : this.fb.group({
'firstname': new FormControl('', Validators.required),
'lastName': new FormControl('', Validators.required)
})
field firstname
都是小写,但在html中是骆驼:
<input type="text" formControlName="firstName">
字段名称是案例敏感的。
在您的情况下,您的打字稿应该是这样:
user : this.fb.group({
'firstName': new FormControl('', Validators.required),
'lastName': new FormControl('', Validators.required)
})
更新:
要访问HTML中的user
表格组,您可以通过在打字稿中创建公共属性来完成:
public get userGroup(): FormGroup {
return this.myForm.get('user') as FormGroup;
}
现在您可以在HTML中以以下方式使用:
<div class="validation-message" *ngIf="!userGroup.controls['firstName'].valid && userGroup.controls['firstName'].dirty">
This field is invalid
</div>
修复错误的"属性'控件"的解决方案在类型'AbstractControl'中不存在,而是将打字稿文件中的嵌套表单项目分为其自己的控件。代码如下:
import { Component, OnInit } from '@angular/core';
import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Reactive Form - Nested FormGroups';
myForm: FormGroup;
userControl: FormGroup;
constructor(
private fb: FormBuilder
) {}
ngOnInit() {
this.buildForm();
}
buildForm() {
this.userControl = this.fb.group({
'firstName': new FormControl('', Validators.required),
'lastName': new FormControl('', Validators.required)
})
this.myForm = this.fb.group({
user : this.userControl,
'bio': new FormControl()
});
}
}
html文件...
<hello name="{{ name }}"></hello>
<form [formGroup]="myForm">
<div class="my-box" formGroupName="user">
<label>
First Name
<input type="text" formControlName="firstName">
<div class="validation-message" *ngIf="!userControl.controls['firstName'].valid && userControl.controls['firstName'].dirty">
This field is invalid
</div>
</label>
</div>
<div class="my-box" formGroupName="user">
<label>
Last Name
<input type="text" formControlName="lastName">
<div class="validation-message" *ngIf="!userControl.controls['lastName'].valid && userControl.controls['lastName'].dirty">
This field is invalid
</div>
</label>
</div>
<div class="my-box">
<label for="bio" class="block-me">Bio</label>
<textarea formControlName="bio"></textarea>
</div>
</form>
<p>
Data from form: {{ myForm.value | json }}
</p>
这是一个有效的示例:https://stackblitz.com/edit/angular-nestedform