在formArray中验证formGroup时出现问题
我正在创建一个具有角材料垫表的表单。
我在编写应用程序时使用了reactive form，表单初始化看起来像这样：
myForm = this.fb.group({
settings: this.fb.array([])
});我的表单是一个包含formArray控件(设置)的formGroup。
设置formArray包含每个设置的formGroup ( mat-table中的每一行都是一个formGroup并包含多个控件)。
当我试图向它添加验证时，我的问题就开始了。
例如，如果我只有一个内部带有formControl的formGroup，并且其中一个是Validators.required，那么表单是无效的，直到我添加了一些值，然后它才会变为有效状态。
但是，在表单数组中使用formGroup时，即使在向require字段添加了一些值之后，表单状态仍然无效(我甚至通过控制台记录表单，以查看内部值是否发生了更改)。
此外，当我尝试使用valueChange().subscribe捕获更改时...只有当我从formArray中推送/删除组时，该事件才会触发，而不会在设置组中的现有控件发生更改时触发。
如何监听数组中的内部更改事件，然后对它们使用一些自定义赋值？
回答 4
Stack Overflow用户
发布于 2019-01-02 03:33:41
没有看到更多的代码...很难猜测可能出了什么问题。
但以下是我的一些代码以供参考：
组件代码
get addresses(): FormArray {
return <FormArray>this.customerForm.get('addresses');
}
ngOnInit() {
this.customerForm = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(3)]],
lastName: ['', [Validators.required, Validators.maxLength(50)]],
addresses: this.fb.array([this.buildAddress()])
});
}
addAddress(): void {
this.addresses.push(this.buildAddress());
}
buildAddress(): FormGroup {
return this.fb.group({
addressType: 'home',
street1: ['', Validators.required],
street2: '',
city: '',
state: '',
zip: ''
});
}模板
<div formArrayName="addresses"
*ngFor="let address of addresses.controls; let i=index">
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label"
attr.for="{{'street1Id' + i}}">Street Address 1</label>
<div class="col-md-8">
<input class="form-control"
id="{{'street1Id' + i}}"
type="text"
placeholder="Street address (required)"
formControlName="street1"
[ngClass]="{'is-invalid': (address.controls.street1.touched ||
address.controls.street1.dirty) &&
!address.controls.street1.valid }">
<span class="invalid-feedback">
<span *ngIf="address.controls.street1.errors?.required">
Please enter your street address.
</span>
</span>
</div>
</div>
</div>你可以在这里找到完整的项目：https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final
Stack Overflow用户
发布于 2019-08-31 03:12:28
我正在做以下事情:！
const array = (this.fg.get('addresses') as FormArray).controls;
array.push(this.fb.group({...}));而它应该是(无controls)
const array = (this.fg.get('addresses') as FormArray);
array.push(this.fb.group({...}));Stack Overflow用户
发布于 2019-01-02 06:37:29
您使用的嵌套结构不应影响验证规则。如果一个FormControl是无效的，无效的状态将会冒泡到根AbstractControl (在本例中是您的'myForm‘FormGroup )。Angular将为您处理这一切。
查看这个具有与您所描述的相同表单结构的stackblitz示例：https://stackblitz.com/edit/angular-xhppjs?file=src%2Fapp%2Fapp.component.html
奖金信息：
不要试图捕获valueChanges来强制执行验证规则。如果您只是按照Angular的预期方式使用验证器函数，那么您将会更轻松。(https://angular.io/guide/form-validation#reactive-form-validation)
下面是Angular内置组件的列表：https://angular.io/api/forms/Validators
下面是关于创建自定义验证器函数的部分，如果内置的函数不能满足您的需求：https://angular.io/guide/form-validation#custom-validators
https://stackoverflow.com/questions/53997655
复制相似问题
腾讯云开发者
