我需要开发一个可重用的列表组件,它返回一个对象列表,一个简单的对象列表,那些应该被赋值给一个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>