[输出] [1]我有一个关于问题的选择列表，我动态地添加了关于那个问题的列表选项。如何设置单选按钮文本并将选择值（选定的选择ID）传递给组件类而不是单选按钮文本。
如果选中了单选按钮，则所有单选按钮的文字都会消失
这是我的组件类
export class HomeComponent implements OnInit {
survey: FormGroup;
user: User[] = [
{
id: 1,
question: 'Question 1',
choice: [
{
ChoceId: 1,
Value: '1choice 1'
},
{
ChoceId: 2,
Value: '1choice 2'
},
{
ChoceId: 3,
Value: '1choice 3'
},
{
ChoceId: 4,
Value: '1choice 4'
}
]
}, {
id: 2,
question: 'Question 2',
choice: [
{
ChoceId: 1,
Value: '2choice 1'
},
{
ChoceId: 2,
Value: '2choice 2'
},
{
ChoceId: 3,
Value: '2choice 3'
}
]
}, {
id: 3,
question: 'Question 3',
choice: [
{
ChoceId: 1,
Value: '3choice 1'
},
{
ChoceId: 2,
Value: '3choice 2'
},
{
ChoceId: 3,
Value: '3choice 3'
}
]
}
]
constructor() {
}
ngOnInit() {
this.survey = new FormGroup({
sections: new FormArray([
this.initSection(),
]),
});
for (let i = 0; i < this.user.length; i++) {
this.addQuestion(0, this.user[i].question)
this.add(0, i+1,this.user[i].choice);
this.removeOption(0, i, 0)
}
this.removeQuestion(0);
}
initSection() {
return new FormGroup({
questions: new FormArray([
this.initQuestion('questionTitle')
])
});
}
initQuestion(val: string) {
return new FormGroup({
questionTitle: new FormControl(val),
options: new FormArray([
this.initOptions('')
])
});
}
initOptions(val: string) {
return new FormGroup({
optionTitle: new FormControl(val)
});
}
addSection() {
const control = <FormArray>this.survey.get('sections');
control.push(this.initSection());
}
addQuestion(j, val: string) {
console.log(j);
const control = <FormArray>this.survey.get('sections').controls[j].get('questions');
control.push(this.initQuestion(val));
}
add(i, j, choice: Choices[]) {
const control = <FormArray>this.survey.get('sections').controls[i].get('questions').controls[j].get('options');
if (choice) {
for (j = i; j < choice.length; j++) {
control.push(this.initOptions(choice[j] .Value));
}
}else{
control.push(this.initOptions(''));
}
}
getSections(form) {
//console.log(form.get('sections').controls);
return form.controls.sections.controls;
}
getQuestions(form) {
//console.log(form.controls.questions.controls);
return form.controls.questions.controls;
}
getOptions(form) {
//console.log(form.get('options').controls);
return form.controls.options.controls;
}
removeQuestion(j) {
const control = <FormArray>this.survey.get('sections').controls[j].get('questions');
control.removeAt(j);
}
removeSection(i) {
const control = <FormArray>this.survey.get('sections');
control.removeAt(i);
}
removeOption(i, j, k) {
// debugger;
console.log(i, j, k);
const control = <FormArray>this.survey.get(['sections', i, 'questions', j, 'options']); // also try this new syntax
control.removeAt(k);
}
remove(i, j) {
const control = <FormArray>this.survey.get(['sections', i, 'questions', j, 'options']);
control.removeAt(0);
control.controls = [];
}
onSubmit(form:NgForm) {
debugger;
console.log(this.survey.value.optionTitle);
console.log(form);
}
}
html
<form [formGroup]="survey" novalidate (ngSubmit)="onSubmit(survey)">
<!---Survey Section -->
<div formArrayName="sections">
<div class="section-container" *ngFor="let section of getSections(survey); let i = index">
<div class="ui raised segments" [formGroupName]="i">
<h4 class="ui header">User likes and choices</h4>
<!-- <input type="text" placeholder="Untitled form" formControlName="sectionTitle">
<input type="text" placeholder="Form Description" formControlName="sectionDescription"> -->
<!-- Question segment -->
<!---Survey Section -->
<hr>
<div class="question-container" formArrayName="questions">
<div [formGroupName]="j" *ngFor="let question of getQuestions(section); let j = index">
<input type="text" placeholder="Untitled Question" formControlName="questionTitle">
<!-- <select formControlName="questionType">
<option></option>
<option>Check Boxes</option>
<option>Free Text</option>
<option>Rating</option>
<option>Date</option>
<option>Time</option>
</select> -->
<div *ngIf="survey.errors" class="alert alert-danger">
{{ survey.errors }}
</div>
<div>
<a (click)="add(i,j)">Add_Option</a>||
<a (click)="remove(i,j)">Remove_whole_options</a>
</div>
<!-- Option Addation -->
<div formArrayName="options">
<div [formGroupName]="k" *ngFor="let option of getOptions(question); let k=index">
<label>
<input type="radio" [value]="" formControlName="optionTitle" >
<span>{{option.get('optionTitle').value}}</span>
</label>
</div>
<!-- End Option Addition -->
<!-- Option Addtion -->
<!-- End Option Addition -->
</div><br>
<hr>
<div>
<a (click)="addQuestion(i)">Add Question...</a>
<span *ngIf="getQuestions(section).length > 1" (click)="removeQuestion(i)">Remove Question</span>
</div>
</div><br>
</div>
<!-- End Question -->
</div>
<br>
<button (click)="addSection()" class="point">Add Section </button>
<span *ngIf="getSections(survey).length > 1" (click)="removeSection(i)">Remove Section</span>
</div>
</div>
<!-- End Section -->
<button type="submit">Get-Link</button>
</form>
<pre> {{survey.value | json}} </pre>
