使用来自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

将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..
                }

             });

          }

这将解决您的问题。

Answer 2

如果你想在提交后只显示验证消息，我建议如下，我们在模板中迭代wish数组，初始设置所有选中(正如你所希望的)。我们会监听表单数组的valueChanges，但只要表单没有提交，就会过滤掉。我们将引入一个新的变量，例如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>