Question

我的表单中每个字段旁边都有多个复选框，复选框数据不会保存。我必须弄清楚在提交表单之前所有复选框都已选中。如果选中所有复选框，我将得到true，否则得到false。我需要以动态方式进行操作，因为我的表单中包含大量字段。鉴于我的html代码的一部分...

                            <div class="ui-g-12 ui-md-12">
                                <div class="ui-g-12 ui-md-11">
                                    <span class="md-inputfield">
                                        <input type="text" pInputText 
                                    formControlName="sequenceOfTotal">
                                        <label>Sequence of Total(27)</label>
                                    </span>
                                </div>
                                <div class="ui-g-12 ui-md-1">
                                    <span class="md-inputfield">
                                        <p-checkbox binary="true">
                                        </p-checkbox>
                                    </span>
                                </div>
                            </div>

Answer 1

我不完全了解您的用例以及该解决方案需要如何“动态”，但是由于您已经在使用formBuilder，因此可以在表单中添加一个名为“ checkboxes”的新formGroup，其中包含该值每个复选框的数量（默认值为false，Validators.required）。

例如：

// HTML
<p-checkbox [formControl]="this.form?.controls['checkboxes']?.controls['cb1']"></p-checkbox>
<p-checkbox [formControl]="this.form?.controls['checkboxes']?.controls['cb2']"></p-checkbox>
<p-checkbox [formControl]="this.form?.controls['checkboxes']?.controls['cb3']"></p-checkbox>

// TS
this.form = fb.group({
    sequenceOfTotal: [''],
    checkboxes: fb.group({
      cb1: [false, Validators.required],
      cb2: [false, Validators.required],
      cb3: [false, Validators.required],
    }),
});

然后，当您需要确保选中每个复选框时，可以验证

this.form.controls.checkboxes.valid

当然，如果您当前正在使用“ this.form.value”来生成要发送到后端的数据，则可以为复选框创建第二个表单，也可以将formGroup分为两个。

>

this.form = fb.group({
    data: fb.group({
      sequenceOfTotal: [''],
    },
    checkboxes: fb.group({
      cb1: [false, Validators.required],
      cb2: [false, Validators.required],
      cb3: [false, Validators.required],
    }),
});

并对模板/函数进行相应的更改。

Answer 2

@Beerbossa我用另一种方式做，因为我说我的表格领域很大。我在[（ngModel）]中为每个复选框设置了一个数组并将数组元素设置为false

  const classes = useStyles(props);
  const { name, text, firstButtonText, secondButtonText } = props;
  const [show, setShow] = useState(false);

  const handleReadMore = () => {
    setShow(prevShow => !prevShow);
  };

  return (
    <Card className={classes.card}>
      <CardMedia
        className={classes.media}
        image={require(`../../assets/photos/${name}.png`)}
        title={name}
      />
      <CardContent>
        <Typography
          gutterBottom
          variant="h5"
          component="h2"
          className={classes.textStyling}
        >
          {show ? text : text.slice(0, 45)}
        </Typography>
      </CardContent>

      <CardActions>
        <Button size="small" color="primary">
          {firstButtonText}
        </Button>
        <Button size="small" color="primary" onClick={handleReadMore}>
          {secondButtonText}
        </Button>
      </CardActions>
    </Card>
  );
};

HTML部分：

basicCheckboxes: any[] = [];

setCheckBoxes() {
        for (let i = 0; i < 20; i++) {
            this.basicCheckboxes[i] = false;
        }
}

然后最后在提交表单时，我正在检查是否选中所有复选框

    <div class="ui-g-12 ui-md-12">
         <div class="ui-g-12 ui-md-11">
               <span class="md-inputfield">
                    <input type="text" pInputText formControlName="sequenceOfTotal">
                    <label>Sequence of Total (27)*</label>
                </span>
          </div>
          <div class="ui-g-12 ui-md-1">
                <span class="md-inputfield">
                     <p-checkbox binary="true" [(ngModel)]="basicCheckboxes[17]"  
                           [ngModelOptions]="{standalone: true}">
                      </p-checkbox>
                 </span>
           </div>
   </div>

获取表单提交时所有p复选框的状态（Angular PrimeNG）

2 个答案: