我正在为一个编辑器设计原型,该编辑器根据模型向api发送数据。 这是模型:
title: string,
desc: string,
pairs: [
{
left: { label: string },
right: { label: string }
},
...
]
这里的问题是我需要使用角度形式,并且找不到显示/使用left.label和right.label的方法。
现在,我的代码(如下所示)在打字稿中工作,因为它使用给定值(根据模型的一些模拟数据)初始化表单。如果在给定值后登录或打印formGroup,它将完全按照原样显示。
但是我的主要问题是组件的html。即使我的formGroup格式正确,我似乎也无法使用标签属性(当然,我想对其进行编辑)。
我认为这是因为当我在formArray中创建一个对时,我仅将左和右属性设置为组中的formControl。
这是我的component.ts
:
export class LinksEditorComponent implements OnInit {
@Input() exercise;
exerciseForm: FormGroup;
get pairs(): FormArray {
return this.exerciseForm.get('pairs') as FormArray;
}
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
if (!this.exercise.title || !this.exercise.desc || !this.exercise.pairs) {
this.exercise = {
title: '',
desc: '',
pairs: []
};
}
this.initExerciseForm();
}
initExerciseForm() {
this.exerciseForm = this.formBuilder.group({
title: [this.exercise.title, Validators.required],
desc: [this.exercise.desc, Validators.required],
pairs: this.formBuilder.array(
this.exercise.pairs.map(pair => this.createPair(pair)),
Validators.required
)
});
}
createPair(pair: any): FormGroup {
return this.formBuilder.group({
left: [{ label: pair.left.label }, Validators.required],
right: [{ label: pair.right.label }, Validators.required]
});
}
onAddPair() {
this.pairs.push(
this.formBuilder.group({
left: [{ label: '' }, Validators.required],
right: [{ label: '' }, Validators.required]
})
);
}
}
这是我的component.html
:
<mat-card class="links-editor" *ngIf="exercise">
<form
fxLayout="column"
fxLayoutAlign="space-between center"
[formGroup]="exerciseForm"
(ngSubmit)="onSubmit()"
fxLayout="column"
>
<mat-form-field appearance="standard">
<mat-label>Title</mat-label>
<input matInput formControlName="title" />
</mat-form-field>
<mat-form-field appearance="standard">
<mat-label>Description</mat-label>
<input matInput formControlName="desc" />
</mat-form-field>
<mat-list formArrayName="pairs">
<div *ngFor="let pairControl of pairs.controls; let i = index">
<div [formGroupName]="i">
<mat-form-field appearance="standard">
<mat-label>Left chip</mat-label>
<input matInput formControlName="left" />
</mat-form-field>
<mat-form-field appearance="standard">
<mat-label>Right chip</mat-label>
<input matInput formControlName="right" />
</mat-form-field>
</div>
</div>
<button type="button" mat-mini-fab color="accent" (click)="onAddPair()">
<mat-icon>add</mat-icon>
</button>
</mat-list>
<button type="submit" mat-fab color="accent" [disabled]="exerciseForm.invalid">
<mat-icon>done</mat-icon>
</button>
</form>
</mat-card>
如果我尝试在HTML文件中设置<input formControlName="left.input">
,则控制台中将出现错误,并且不会显示数据。当然,如果我设置<input formControlName="left">
,我将得到...左边的值:[对象对象]。
答案 0 :(得分:0)
object object表示您具有要加载到球型摄像机中的js对象。将其放在与输入相同标签内的html
<p>{{left | json}}</p>
然后您应该看到左侧对象的所有可用属性,然后相应地在formcontrolName中设置
答案 1 :(得分:0)
好的,我找到了解决方案!我不明白我只能在FormGroup中创建一个FormGroup。所以这就是我的代码现在的样子,以防万一有人需要帮助:
component.ts
对创建
createPair(pair: any): FormGroup {
return this.formBuilder.group({
left: this.formBuilder.group({ label: [pair.left.label, Validators.required] }),
right: this.formBuilder.group({ label: [pair.right.label, Validators.required] })
});
}
onAddPair() {
this.pairs.push(
this.formBuilder.group({
left: this.formBuilder.group({ label: ['', Validators.required] }),
right: this.formBuilder.group({ label: ['', Validators.required] })
})
);
}
component.html
显示
<mat-list formArrayName="pairs">
<div *ngFor="let pairControl of pairs.controls; let i = index">
<div [formGroupName]="i">
<mat-form-field appearance="standard" formGroupName="left">
<mat-label>Left chip</mat-label>
<input matInput formControlName="label" />
</mat-form-field>
<mat-form-field appearance="standard" formGroupName="right">
<mat-label>Right chip</mat-label>
<input matInput formControlName="label" />
</mat-form-field>
</div>
</div>
<button type="button" mat-mini-fab color="accent" (click)="onAddPair()">
<mat-icon>add</mat-icon>
</button>
</mat-list>