Question

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

this

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>

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

我们在“componentDetails”的方式中有一个callbackForm：[{“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);
   }
}

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

2 个答案: