Angular 5 multiple checkbox multi-check box loading and value-passing solution

Angular 5 multiple checkbox multi-check box loading and value-passing solution

 

When we came across Checkboxs with multi-select lists in FormControl responsive forms, we encountered some problems with loading and checking or unchecking the dynamic two-way binding values ​​and page display. Let's take a closer look at the solution.

 

Next, this code needs to be pasted into the online js debugging tool to run the result

Paste the following code into the src/app.ts file of the js debugging tool at this address

 

code show as below:

 

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { Component } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `

  <form [formGroup]="myForm" (ngSubmit)="save($event,myForm.value)">
      <div *ngFor="let data of emails">
          <input type="checkbox"  (change)="onChange(data.email, $event.target.checked)" [checked]="isChecked(data)"> {{data.email}}<br>
      </div>
      <span class="text-danger" *ngIf="useremail.invalid && (useremail.dirty || useremail.touched)">Select at least one API type! </span>
      <input type="text" formControlName="appkey">
       <span class="text-danger" *ngIf="appkey.invalid && (appkey.dirty || appkey.touched)">Select at least one API type! </span>
      <input type="text" formControlName="secret">
      <span class="text-danger" *ngIf="secret.invalid && (secret.dirty || secret.touched)">Select at least one API type! </span>
     <button type="submit" [disabled]="myForm.invalid">提交 </button>
  </form>

  <pre>Form values: {{myForm.value | json}}</pre>
    <pre>Form values: {{useremail.invalid | json}}</pre>
    <pre>Form values: {{useremail.status | json}}</pre>
    <pre>Form values: {{myForm.status | json}}</pre>
  `,
})
export class App {
    emails = [{email:"email1"},{email:"email2"},{email:"email3"},{email:'email4'}]
    myForm: FormGroup;
    selectEmails:Array<any>=[{email:"email1"},{email:"email2"}];
    constructor(private fb: FormBuilder) { }
  
    by OnInit () {
      
      this.myForm = this.fb.group({
        useremail: this.fb.array([],[Validators.required,Validators.minLength(1)]),
        appkey:['',Validators.required],
        secret:['',Validators.required]
      });
      
      
     const emailFormArray = <FormArray>this.myForm.controls.useremail;
     this.selectEmails.forEach((em)=> {
        let index= emailFormArray.controls.findIndex(x=>x.value==em.email);
        if(index==-1){
           emailFormArray.push(new FormControl(em.email));
        }
     });
     this.myForm.patchValue({appkey:"sdfasdf",secret:"wwwww"});
    }
    
    isChecked(data:any):Boolean{
      return   this.selectEmails.find((item)=>{
         return  item.email==data.email
         
        });
    }
    get useremail(){return this.myForm.get('useremail');}
    get appkey(){return this.myForm.get('appkey');}
     get secret(){return this.myForm.get('secret');}
    
    save($event,values){
      console.log("form values: %o",values);
    }
    
  
    onChange(email:string, isChecked: boolean) {
      const emailFormArray = <FormArray>this.myForm.controls.useremail;

      if(isChecked) {
        let index = emailFormArray.controls.findIndex(x => x.value == email);
        if(index==-1){
          emailFormArray.push(new FormControl(email));        
        }
        
      } else {
        let index = emailFormArray.controls.findIndex(x => x.value == email)
        emailFormArray.removeAt(index);
      }
  }

}

@NgModule ({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}