![](/img/trans.png)
[英]How to add valueChanges on formcontrol added dynamically in formArray in Angular7
[英]Angular7 ControlValueAccesor as FormArray
我需要开发一个可重用的列表组件,它返回一个对象列表,一个普通对象列表,这些对象应该分配给formGroup对象值中的键。
有没有办法在Angular中做一个列表自定义控件?
这是我尝试过的事情和打算做的事情,希望代码能自我解释。
// PARENT COMPONENT
<div [formGroup]="form" [ngSubmit]="submit()">
<custom-list formControlName="profiles"></custom-list>
<custom-list formControlName="groups"></custom-list>
<custom-list formControlName="users"></custom-list>
<button>Submit</button>
</div>
@Component(...)
export class ParentComponent implements OnInit {
form: FormGroup;
constructor(private _formBuilder: FormBuilder) {
// Method One
this.form = this._formBuilder.group({
profiles: ['', Validators.required],
groups: ['', Validators.required],
users: ['', Validators.required]
});
// Method Two. Don't know how is should be or if it will work?
this.form = this._formBuilder.group({
profiles: this._formBuilder.array([]),
groups: this._formBuilder.array([]),
users: this._formBuilder.array([])
});
}
}
然后是子级(列表组件定义为此)
// CHILD COMPONENT
@Component({
selector: 'custom-list',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomListComponent),
multi: true
}]
})
export class CustomListComponent implements OnInit, ControlValueAccessor {
form: FormGroup;
constructor(private _formBuilder: FormBuilder) {
this.form = this._formBuilder.group({
elements: this._formBuilder.array([], Validators.required)
});
}
writeValue(val: any): void {
val && this.form.setControl('elements', this._formBuilder.array(val));
}
}
表单值应如下所示
{
profiles: [{id: 1, name: "profile 1"}, {id: 2, name: "profile 2"}],
groups: [{id: 1, name: "group 1"}, {id: 2, name: "group 2"}],
users: [{id: 1, name: "user 1"}, {id: 2, name: "user 2"}]
}
以这种方式工作,但是列表为表单组密钥添加了一个额外的密钥,这是我添加到子表单中的组。
{
profiles: {
elements: [{id: 1, name: "profile 1"}, {id: 2, name: "profile 2"}]
},
groups: {
elements: [{id: 1, name: "group 1"}, {id: 2, name: "group 2"}]
},
groups: {
elements: [{id: 1, name: "user 1"}, {id: 2, name: "user 2"}]
}
}
扩展了我的评论, stackblitz您的孩子
<div *ngFor="let group of myFormArray.controls;let i=index" [formGroup]="group">
<input formControlName="prop1">
<div *ngIf="group.get('prop1').invalid">Prop1 Required</div>
<input formControlName="prop2"/>
<div *ngIf="group.get('prop2').invalid">Prop2 Required</div>
@Input()myFormArray:FormArray
你父母
<div [formGroup]="form" [ngSubmit]="submit()">
<custom-list [myFormArray]="form.get('profiles')"></custom-list>
<custom-list [myFormArray]="form.get('groups')></custom-list>
<custom-list [myFormArray]="form.get('users')></custom-list>
<button>Submit</button>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.