使用API 中的数据在Angular中创建动态复选框验证

Question

所以我有一个显示API列表的函数：

displayEventTicketDetails() {
  this.Service
      .getEventTicketDetails().subscribe((data: any) => {
        this.eventTicketDetails = data.map(ticket => ticket.ticket_name);
        console.log(this.eventTicketDetails);
      });
  }

这是上面函数的结果：["Regular", "VIP", "Table", "Testing", "Cabana"]

这是表单数组的声明方式：

ngOnInit() {
    this.composeMessage = this.fb.group({
      ticket: new FormArray([])
    });

然后我在下面使用此功能来跟踪是否选中了复选框

  onChange(event: any, isChecked: boolean){
      const control = <FormArray>this.composeMessage.controls.ticket;
      if(isChecked){
        control.push(new FormControl(event))
      } else{
        const index = control.controls.findIndex(x => x.value === event);
        control.removeAt(index)
      }
  }

然后终于在我的ts文件中，这是我的onsubmit函数，用于在表单上提交数据：

 submitComposeMessage() {
    this.submitted = true;
    if (this.composeMessage.invalid) {
      return;
    } 
    const ticket = this.f.ticket.value;
    this.Service
      .createMessage(
        ticket)
      .subscribe(
        (res: any) => {
          if (res.err) {
            this.toaster.errorToastr(res.message, null, { toastTimeout: 5000 });
            return false;
          }
          this.toaster.successToastr(res.message, null, { toastTimeout: 5000 });
          console.log("Message successfully created");
        },
        err => {
          console.log(err);
        }
      );
  }

因此，在我的HTML文件中，这是我的输入字段：

 <ng-container *ngFor="let event of eventTicketDetails; let i = index"  >
  <label class="w-checkbox checkbox-field" >
    <input 
    type="checkbox" 
    id="{{i}}"
    name="checkbox-9"
    class="w-checkbox-input checkbox"
    (change)="onChange(event, $event.target.checked)"
    [checked]="composeMessage.controls.ticket.value.indexOf(event)>=0">
      <span class="no-margin w-form-label">{{event}}</span>
  </label>
</ng-container>

通过该循环，我可以获得此结果

所以，我需要两件事的帮助：

1）。我希望页面首次加载时默认情况下选中所有复选框。2）。我想验证此复选框，以确保提交时至少选中了一个复选框。

我将不胜感激。

Answer 1

如果您只想在提交后显示验证消息，我建议以下内容，我们在其中迭代模板中的formarray，首先将所有复选框都设置为选中状态（这就是您所希望的）。我们将监听formarray的valueChanges，但是只要不提交form就将其过滤掉。我们将引入一个新变量，例如isEmpty，基于此变量我们将显示/隐藏验证消息。总而言之。...

TS：

isEmpty = false;
submitted = false;

constructor(private fb: FormBuilder) {
  const ctrls = this.eventTicketDetails.map(control => this.fb.control(true));
  this.composeMessage = this.fb.group({
    ticket: this.fb.array(ctrls)
  });

  this.tickets.valueChanges.pipe(
    filter(() => !!this.submitted)
  ).subscribe((value) => {
    value.some(x => x === true) ? this.isEmpty = false : this.isEmpty = true;
  })
}

get tickets() {
  return this.composeMessage.get("ticket") as FormArray;
}

onSubmit() {
  this.submitted = true;
  const selectedTickets = this.tickets.value
    .map((checked, i) => (checked ? this.eventTicketDetails[i] : null))
    .filter(value => !!value);
  selectedTickets.length ? this.isEmpty = false : this.isEmpty = true
}

HTML：

<label formArrayName="ticket" *ngFor="let t of tickets.controls; index as i">
  <input type="checkbox" [formControlName]="i">
  {{eventTicketDetails[i]}}
</label>
<small *ngIf="isEmpty">Choose at least one checkbox</small>

STACKBLITZ

Answer 2

将ID更改为类似的内容

id="ticket{{i}}"

在此方法中，这样编写并在ngOnit上调用displayEventTicketDetails。这将检查所有值：

     displayEventTicketDetails() {
      this.Service
          .getEventTicketDetails().subscribe((data: any) => {
  this.eventTicketDetails = data.map(ticket =>ticket.ticket_name);
        setTimeout(() => {
             for(var i= 0;i < this.evenTicketDetails.length ; i++){  
              var id = "ticket" + i;
            (<HTMLInputElement>document.getElementById(id)).checked = true;   
                console.log(this.eventTicketDetails);
           }, 500);

          });
      }



  2. In submit method write something like this
    submitComposeMessage() {
                for(var i= 0;i < this.evenTicketDetails.length ; i++){  
                 var id = "ticket" + i;
                var resval =  (<HTMLInputElement>document.getElementById(id)).value;   
                   if(resval){

 // this will check atleast one value is checked and if it true we are coming 
                    out of the loop and performing other operations..
                i = this.evenTicketDetails.length;

               } 
               else{
                // show error message or block from going forward..
                }

             });

          }

这将解决您的问题。