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

2 回答

• 0

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

  但至于你的问题，既然你正在处理几个问题和动态 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，你当然可以考虑做的，不是在你的表单对象中有 all 选项，而只是添加你选择的单选按钮的值 .

  回复于 2024-04-20T12:11:47+08:00
• 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;
    }
  

  我们在“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);
     }
  }
  

  回复于 2024-04-20T12:11:47+08:00