如何在响应式表单中获取单选按钮的选定值

Question

如何在响应式表单中获取单选按钮的选定值

angularradio-buttonangular-reactive-formsformarray

3

我试图获取单选按钮的selectedValue，并将其作为真实的单选文本传递。如果选择了Choice 1，则将selectedValue发送为true，否则为false。如果选择了Choice 2，则将selectedValue发送为true，否则为false。我无法将其设置为true。想知道是否有人以前做过这个？ https://stackblitz.com/edit/angular-xfrezb

- David Jeyathilak

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eliseo · Answer 1

你正在混淆表现视图和表单的值。我认为最好分开这些概念。我们可以使用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"中有一个回调表单，格式为[{"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);
   }
}

- AT82 · Answer 2

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

但是对于您的问题，由于您正在处理多个问题和动态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

顺便说一句，你可以考虑的一件事是，在你的表单对象中不要包含所有选项，而只需添加你选择的单选按钮的值。