我正在尝试获取单选按钮的 selectedValue 并将其作为 true 与单选文本一起传递。如果选择了选项 1,则 selectedValue 作为 true 发送,否则为 false。如果选择了选项 2,则 selectedValue 将被发送为 true,否则为 false。我无法将其设置为 true。想知道以前有没有人这样做过?
问问题
1660 次
2 回答
0
首先,始终将问题中的相关代码作为代码块包含在内,因为链接往往会随着时间的推移而消失......
但至于你的问题,因为你正在处理几个问题和 dynamic value
,我会通过当前的 formArraycomponents
和 current answer
。您需要先将所有表单控件设置selectedValue
为false
,否则切换单选按钮最终会变成true
单击它们中的每一个。因此,在首先将所有设置设置为false
之后,只需将所选单选按钮设置为true
. 所以做这样的事情:
<div *ngIf="question.controls.type.value === 'radio'">
<p>{{ question.controls.label.value }}</p>
<div formArrayName="component">
<div *ngFor="let answer of question.controls.component.controls;
let j = index" [formGroupName]="j">
<label>
<input type="radio" name="radio-stacked"
(click)="updateSelection(question.controls.component.controls, answer)">
<span>{{ answer.value.value }}</span>
</label>
</div>
</div>
</div>
然后你的updateSelection
方法:
updateSelection(formArr, answer) {
formArr.forEach(x => {
x.controls.selectedValue.setValue(false);
});
answer.controls.selectedValue.setValue(true);
}
你的分叉StackBlitz
PS,您当然可以考虑做的不是在您的表单对象中拥有所有选择,而只是添加您选择的单选按钮的值。
于 2018-01-27T13:17:38.707 回答
0
您正在混合演示视图和表单的值。我认为最好将概念分开。我们可以使用 formObj 来创建表示,并使用 callbackForm 来创建值。查看代码中的注释
//app.main.html
<form [formGroup]="callbackForm" (submit)=submit(callbackForm)>
<div>
<div formArrayName="componentDetails">
<div *ngFor="let question of callbackForm.controls.componentDetails.controls; let i = index;" [formGroupName]="i">
<div class="row">
<div class="col-md-12 panel-group panel-group--compressed">
<div class="panel panel--default">
<fieldset>
<!--see that we create the "view of the form using formObj.componentDetails--!>
<div class="row" *ngIf="formObj.componentDetails[i].type === 'radio'">
<div class="col-md-12">
<p>{{ formObj.componentDetails[i].label }}</p>
<p>{{ formObj.componentDetails[i].cpv }}</p>
<!-- we iterate throught "formObj.componentDetails[i].component -->
<!-- again, we are using formObj to the "view" -->
<div *ngFor="let answer of formObj.componentDetails[i].component; let j = index">
<label class="radio radio--alt radio--stacked">
<span class="radio__input"></span>
<span class="radio__label">{{ answer.value }}</span>
</label>
<!--We have a input with name=formObj.componentDetails[i].cpv -->
<!--it's necesary enclose between {{ }} the name -->
<input type="radio" formControlName="{{formObj.componentDetails[i].cpv}}" [value]="answer.selectedValue">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit">send</submit>
</form>
<pre>{{callbackForm.value | json}}</pre>
//app-main.component
@Component({
selector: 'app-app-main',
templateUrl: './app-main.component.html'
})
export class AppMainComponent {
constructor(private _formBuild: FormBuilder) {}
ngOnInit() {
this.loadObservableForm();
}
public callbackForm: FormGroup;
formObj = {
"componentDetails": [{
"component": [{
"value": "Choice 1",
"selectedValue": true
}, {
"value": "Choice 2",
"selectedValue": false
}],
"cpv": "name1", //<--we use this to create the name of the fileld
"label": "Description of Problem",
"type": "radio",
"mandatory": true
}]
};
loadObservableForm() {
this.callbackForm = this._formBuild.group({
componentDetails: this._formBuild.array([])
});
this.addComponentDetails();
}
addComponentDetails() {
const control = <FormArray>this.callbackForm.controls.componentDetails;
this.formObj.componentDetails.forEach(x => {
control.push(this.addControl(x));
});
}
addControl(x) {
//we create a group control with a control with a name "x.cpv"
const group = this._formBuild.group({});
group.addControl(x.cpv,new FormControl());
return group;
}
我们有一个 callbackForm 方式为 "componentDetails": [{"name1": false},{"name2":value2}...]。所以,在提交中我们可以做一些类似的事情
submit(form)
{
if (form.valid)
{
let response:any={}
for (let control of form.value.componentDetails)
response={...response,...control}
console.log(response);
}
}
于 2018-01-27T13:30:35.607 回答