我有一个表单,可以在“保存”时将正确的数据发送到我的 api/forms 数组。有一系列复选框可供用户选择。一旦选择,我想给出所选值的摘要。我可以在表单保存后呈现此值,因为这些值将位于响应式(Reactive)表单数组上,但是我想在保存/表单提交之前获取该值以用于呈现目的。 StackBlitz - https://stackblitz.com/edit/angular-fgupp3
我几乎已经完成了这一任务,但是第一个复选框返回一个真/假值,而其余的复选框返回所需的值
组件.html
<form [formGroup]="form" (ngSubmit)="onSubmit('formSubmit')" novalidate>
<div class="row">
<div class="col-md-8">{{form.value.selection}}</div> <!--present selected values here -->
<div class="col-md-8">
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
<div class="col-md-6">
<label formArrayName="selection" *ngFor="let order of form.controls.selection.controls; let i = index">
<input (change)="onChange(i, $event)" type="checkbox" [formControlName]="i">
{{ordersData[i].name}}
</label>
</div>
</div>
<div class="form-group text-center">
<button class="btn btn-success btn-info" (click)="goToNext(Work)"> Next </button>
</div>
</form>
组件.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Personal } from '../data/formData.model';
import { FormDataService } from '../data/formData.service';
import { of } from 'rxjs';
import { FormGroup, FormBuilder, ValidatorFn, FormArray, FormControl } from '@angular/forms';
@Component({
selector: 'mt-wizard-personal',
templateUrl: './personal.component.html',
})
export class PersonalComponent implements OnInit {
personal: Personal;
form: FormGroup;
ordersData = [];
selectedItems: any[] = [];
constructor(private formBuilder: FormBuilder, private router: Router, private formDataService: FormDataService) {
}
ngOnInit() {
this.personal = this.formDataService.getPersonal();
this.form = this.createEntry(this.formBuilder);
// synchronous orders
// this.ordersData = this.getOrders();
// this.addCheckboxes();
of(this.getOrders()).subscribe(selection => {
this.ordersData = selection;
this.addCheckboxes();
});
}
createEntry(formBuilder: FormBuilder) {
return this.formBuilder.group({
title: this.personal.title,
creationDate: this.personal.creationDate,
//selection: new FormArray([], minSelectedCheckboxes(1))
selection: new FormArray([])
});
}
private addCheckboxes() {
this.ordersData.forEach((o, i) => {
const control = new FormControl; // if first item set to true, else false
(this.form.controls.selection as FormArray).push(control);
});
}
getOrders() {
return [
{ id: 100, name: 'order 1' },
{ id: 200, name: 'order 2' },
{ id: 300, name: 'order 3' },
{ id: 400, name: 'order 4' }
];
}
onChange(i: boolean) {
console.log(i);
if (i) {
const selectedOrderIds = this.form.value.selection
.map((v, i) => v ? this.ordersData[i].id : null)
.filter(v => v !== null);
return this.form.value.selection = selectedOrderIds;
}
}
save(form: any): boolean {
const selectedOrderIds = this.form.value.selection
.map((v, i) => v ? this.ordersData[i].id : null)
.filter(v => v !== null);
console.log(selectedOrderIds);
this.form.value.selection = selectedOrderIds;
const data: Personal = Object.assign({}, this.form.value);
this.formDataService.setPersonal(data);
return true;
}
goToNext(form: any) {
if (this.save(form)) {
// Navigate to the work page
this.router.navigate(['/work']);
}
}
}
最佳答案
第一个值标记为true
而不是100
的问题可以通过更改onChange
函数第76行的if来解决 if (i || i===0)
:
onChange(i: boolean) {
if (i || i===0) {
const selectedOrderIds = this.form.value.selection
.map((v, i) => v ? this.ordersData[i].id : null)
.filter(v => v !== null);
return this.form.value.selection = selectedOrderIds;
}
}
不幸的是在 javascript number = 0; if(number)
这是一个假表达式。
另外 OnInit
方法有点困惑,我将在组件中使用一个变量 getOrders()
方法,如下所示:
orders = [
{ id: 100, name: 'order 1' },
{ id: 200, name: 'order 2' },
{ id: 300, name: 'order 3' },
{ id: 400, name: 'order 4' }
]
它可以在组件 .ts 和 .html 中使用,我将像这样简化“OnInit”:
ngOnInit() {
this.personal = this.formDataService.getPersonal();
const ordersArray = new FormArray([]);
this.orders.forEach(order => {
ordersArray.push(new FormControl);
});
this.form = this.formBuilder.group({
title: this.personal.title,
creationDate: this.personal.creationDate,
selection: ordersArray
});
}
关于javascript - 在 UI 中使用 Angular react 形式呈现选中的复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58693473/