如何以反应形式获取无线电的选定值

Question

我正在尝试获取单选按钮的 selectedValue 并将其作为 true 与单选文本一起传递。如果选择了选项 1，则 selectedValue 将作为 true 发送，否则为 false。如果选择了选项 2，selectedValue 将作为 true 发送，否则为 false。我无法将其设置为 true。想知道以前是否有人这样做过？

https://stackblitz.com/edit/angular-xfrezb

Answer 1

首先，始终将相关代码作为代码块包含在您的问题中，因为链接往往会随着时间的推移而消失...

但至于你的问题，因为你正在处理几个问题和动态 value，我会通过当前的 formArray components 和当前的 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，你当然可以考虑做的是，不要在你的表单对象中有所有选择，而只是添加你的单选按钮的值已选择。

Answer 2

您正在混合演示视图和表单的值。我认为最好将概念分开。我们可以使用 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>

//应用-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;
  }

我们有一个回调形式 "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);
   }
}

如何以反应形式获取无线电的选定值

how to get selected value of radio in reactive form

radio-button

angular

angular-reactive-forms

formarray