Question

好，我正在实现一个反应式表单，但是从复选框中获取值时遇到了问题，仅显示我选择的值中第一个的值，而不显示其他值。我附上我的代码：

Component.ts

registerForm: FormGroup;

  builder(
     private Restservice: RestserviceService,
     private route: ActivatedRoute,
     private router: Router,
     private formBuilder: FormBuilder
   ) {

     this.registerForm = this.formBuilder.group ({
       text: [""],
       checkArray: [""],
       radiobutton: [""],
       array: [""],
       list: [""],
       archive: [""],
       date: [""],
       numeric: [""],
       CommonData: [""],
     });
   }

// I show the values of the Form
  submit () {
     if (this.registerForm.valid) {
       console.log ("complete", this.registerForm.value);
       // this.createAnswers ();
     } else {
       alert ("FILL ALL FIELDS");
     }
   }

我在这里使用primeng的p复选框，但问题在于它只能识别选择的第一个值，而其他的则不能。

HTML 。

<div *ngIf="p.codigo_tipopreguntas == 2">
                            <ng-container *ngFor="let v of valores; let i=index">
                              <div *ngIf="p.id === v.codigo_pregunta">
                                  <p-checkbox  value="{{v.preguntas_valor}}"
                                    label="{{v.preguntas_valor}}" formControlName="checkbox"></p-checkbox>
                              </div>
                            </ng-container>
                          </div>

 <button class="btn btn-info btn-just-icon btn-round btn-link" pTooltip="Guardar" tooltipPosition="top"
              (click)="submit()">
              <i class="material-icons">remove_red_eye</i>
            </button>

attached picture of what the submit function prints

Answer 1

如果要具有多个复选框的值，则需要将其放入FormArray中。因此，对于每个valore，您都需要创建自己的FormControl。

我认为此博客文章可能会对您有很大帮助：https://netbasal.com/handling-multiple-checkboxes-in-angular-forms-57eb8e846d21

从“反应形式”复选框中获取值

1 个答案: