Angular - 如何选中和取消选中所有用户角色

Question

I am currently working on a web portal with Angular-7 as frontend and Laravel-5.8 as backend. Also, I use Laravel Spatie for User Role Management.

user.component.ts

export class UsersComponent implements OnInit {

  users = null;     //Store Users Data
  roles = null;     //Store all roles Data
  clients = null;

  public error = {
    'role' : null,
    'email' : null,
    'client_id' : null,
    'first_name' : null,
    'last_name' : null,
    'password' : null
  };
       //Form errors
  keyword = null;   //Current Search Keyword
  pagination = {    //Current Pagination data
    'page' :  '1',
    'max' : '10'
  }
  role = null;
  User = 'User';

  data = {          //User Update Data
    "id" : null,
    "first_name" : null,
    "last_name" : null,
    "client_id" : null,
    "role" : []
  }

  form = {         //New User add Data
    'first_name' : null,
    'last_name' : null,
    'email' : null,
    'client_id' : null,
    'password' : null,
    'password_confirmation' : null,
    'role' : []
  }

  headers = {     //Token for API Authorization
    'Authorization' : this.token.get(),
    'X-Requested-With' : 'XMLHttpRequest'
  }

  sortData = {        //Current Sort Data
    "col" : null,
    "order" : null
  }

  isSuperAdmin = false;

  constructor(private roleManage : RolesCheckService , private route : ActivatedRoute, private pg: NgbPaginationConfig, private token : TokenService, private http : HttpClient, private router : Router,private api : ApiService, private notify : SnotifyService) {
    pg.boundaryLinks = true;
    pg.rotate = true;
  }

  ngOnInit() {

    console.log('isSuperAdmin: ' + this.roleManage.isSuperAdmin);
    this.isSuperAdmin = this.roleManage.isSuperAdmin;
    this.route.queryParams.subscribe(params => {
      if(params['role']){
        this.role = params['role'];
        this.User = this.role;

      } else {
        this.User = 'User';
        this.role = '';
      }
    })
  }

  checkboxAdd(event){
    if(event.srcElement.checked){
      this.form.role.push(event.srcElement.name);
    } else {
      var index =this.form.role.indexOf(event.srcElement.name);
      this.form.role.splice(index, index+1);
    }
    console.log(this.form.role);
  }

}

user.component.html

<div id="addModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">

      <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Add New {{ User }}</h5>
              <button type="button" class="close" (click)='closeAddModal()'>
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
              <form #editUserForm=ngForm>

                  <div class="form-group">
                    <label for="name">First Name</label>
                    <input type="name" name="first_name" id="inputName" class="form-control" placeholder="First Name" [(ngModel)]="form.first_name" required>
                  </div>
                  <div class="form-group">
                      <label for="name">Last Name</label>
                      <input type="name" name="last_name" id="inputName" class="form-control" placeholder="Last Name" [(ngModel)]="form.last_name" required>
                    </div>
                  <div class="form-group">
                      <label for="name">Email</label>
                      <input type="email" name="email" id="inputEmail" class="form-control" placeholder="example@email.com" required [(ngModel)]="form.email">
                  </div>
                    <div class="form-group">
                        <label for="name">Role</label>
                        <div *ngFor="let role of roles">
                            <input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkboxAdd($event)"> {{ role.name }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name">Password</label>
                  <input type="password" name="password" id="inputPassword" [(ngModel)]="form.password" class="form-control" placeholder="Password" required>
                </div>

                <div class="form-group">
                    <label for="name">Password Confirmation</label>
                  <input type="password" name="password_confirmation" id="inputPasswordConfirm" [(ngModel)]="form.password_confirmation" class="form-control" placeholder="Re enter Password" required>
                </div>
              </form>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" (click)='addModalSubmit()' [disabled]="!editUserForm.valid">Save changes</button>
              <button type="button" class="btn btn-secondary" (click)='closeAddModal()'>Close</button>
            </div>
          </div>
        </div>
  </div>

Currently, I use

checkboxAdd(event)

to select the User Role-Permission one-by-one. But I want to be able to Select/Unselect All at once as shown below:

How do I achieve this?

Answer 1

Try using Angular reactive forms instead. They make it much easier to bind actions to data changes.

private form: FormGroup = this.fb.group({
  selectAll: false,
  user: this.fb.group({
    roles: this.fb.array([])
  })
});
constructor(private fb: FormBuilder){}


ngOnInit(){
  this.form.get('selectAll').valueChanges.subscribe(selectAll => {
    const roles = this.form.get('user.roles');

   // Remove all roles first
    while(roles.value.length > 0){
      roles.removeAt(0);
    }

    if(selectAll){
      // Add all roles
      this.roles.forEach(role => {
        roles.push(this.fb.control(role.name));
      });

      return;
    }
  })
}