角材料芯片清单

Question

我正在与Angular和Laravel合作一个项目。 我想让管理员从反应式表单中添加具有指定权限的角色。 要添加角色，我们应该提供角色名称，描述以及来自权限部分的权限数组。 对于最后一部分，我想使用角形材料切屑输入。 用于添加权限的GUI如下所示：

用于添加角色的GUI如下：

在这一部分中，我要在描述下添加一个芯片输入，该输入应只允许我添加权限表中的权限。 我的角色部分代码如下：

.. html：

<div class="card">
      <div class="card-body">
        <form
        [formGroup]="addForm" class="normal-form" (ngSubmit)="onSubmit()"
        >
            <div class="form-row">
              <div class="col-md-4 mb-3" style="vertical-align: middle;">
                <div class="form-row">
                  <div class="container-fluid">
                   
                    <input formControlName="id" matInput hidden>
                   
                    <mat-form-field style="width: 100%;margin-bottom: 10px;">
                      <input formControlName="name" matInput>
                      <mat-placeholder class="placeholder">Enter name *</mat-placeholder>
                      <mat-error>Service is required.</mat-error>
                    </mat-form-field>

                    <mat-form-field style="width: 100%;margin-bottom: 10px;">
                      <input formControlName="description" matInput>
                      <mat-placeholder class="placeholder">Enter description *</mat-placeholder>
                      <mat-error>Description is required.</mat-error>
                  </mat-form-field>
                  
                  </div>
                  <button mat-raised-button color="primary" type="submit" class="btn-block mt-3 mx-2"><span
                    class="material-icons">add</span> <span>{{add}}</span></button>
                </div>
              </div>

              <div class="col-md-8">
                <div class="card p-3">
                  <!-- /.card-header -->
                 
                    <flx-ui-datatable
                      [headers]="['Name', 'Description']"
                      [dataKeys]="['name','description']"
                      dataUrl="http://localhost/finance/server/public/api/v1/role"
                      [dataSrcKey]="'roles'"
                      [hasActionButtons]="true"
                      [enableDataExports]="true"
                      [dataExportsConfig]="{exportsTo:['excel','pdf','print'],title:'Export data'}"
                      [actionButtons]="buttons"
                      (firstActionButtonClicked)="firstButtonClicked($event)"
                      (secondActionButtonClicked)="secondButtonClicked($event)"
                      [limit]="8"
                    ></flx-ui-datatable>
                </div>
              </div>
            </div>
        </form>
      </div>
    </div>

.. ts：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RolesService } from '../shared/roles.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Roles } from '../shared/roles.model';
import swal from 'sweetalert';
import { FlxUiDataTable } from 'flx-ui-datatable';

@Component({
  selector: 'app-roles',
  templateUrl: './roles.component.html',
  styleUrls: ['./roles.component.css'],
})
export class RolesComponent implements OnInit {
  buttons = [
    {
      class: 'btn-primary',
      icon: 'fa fa-edit',
      tooltip: 'Edit',
      tooltipPosition: 'top',
    },
    {
      class: 'btn-danger',
      icon: 'fa fa-trash',
      tooltip: 'Delete',
      tooltipPosition: 'top',
    },
  ];
  constructor(
    public service_service: RolesService,
    private http: HttpClient,
    public flxservice: FlxUiDataTable
  ) {}
  addForm: FormGroup;
  model: Roles;
  readonly RootURL = 'http://localhost/finance/server/public/api/v1/role';

  change = false;
  add = 'Add new role';

  ngOnInit(): void {
    this.initForm();
  }

  initForm() {
    this.addForm = new FormGroup({
      id: new FormControl(''),
      name: new FormControl('', Validators.required),
      description: new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    if (!this.change) {
      if (this.addForm.valid) {
        this.model = this.addForm.value;
        console.log(this.model);
        var connection = this.http
          .post(this.RootURL, this.model)
          .toPromise()
          .then((data) => {
            console.log(data);
            this.flxservice.reloadData();
          });
        if (connection) {
          swal({
            title: 'User is added successfully!',
            text: 'Well done!',
            icon: 'success',
            buttons: {
              cancel: false,
              confirm: false,
            },
          });
          this.addForm.reset();
        } else {
          swal({
            title: 'There are fields tha are NOT valid, try again!',
            text: 'Sorry!',
            icon: 'error',
          });
        }
      } else {
        swal({
          title: 'There are fields tha are NOT valid, try again!',
          text: 'Sorry!',
          icon: 'error',
        });
      }
    } else {
      if (this.addForm.valid) {
        this.model = this.addForm.value;
        console.log(this.model);

        var connection = this.http
          .put(this.RootURL + '/' + this.model.id, this.model)
          .toPromise()
          .then((data) => {
            console.log(data);
            this.flxservice.reloadData();
          });
        if (connection) {
          swal({
            title: 'User is modified successfully!',
            text: 'Well done!',
            icon: 'success',
            buttons: {
              cancel: false,
              confirm: false,
            },
          });
          this.addForm.reset();
          this.add = 'Add new role';
          this.change = !this.change;
        } else {
          swal({
            title: 'There are fields tha are NOT valid, try again!',
            text: 'Sorry!',
            icon: 'error',
          });
        }
      } else {
        swal({
          title:
            'There are some fields that are not valid, fill the fields correctly then try again!',
          text: 'Sorry!',
          icon: 'error',
        });
      }
    }
  }

  firstButtonClicked(event) {
    console.log(event.data);
    this.addForm.patchValue(event.data);
    this.add = 'Modify User';
    this.change = true;
  }
  secondButtonClicked(event) {
    swal({
      title: 'Are you sure?',
      text: 'Once deleted, you will not be able to recover this service!',
      icon: 'warning',
      buttons: {
        cancel: true,
        confirm: true,
      },
      dangerMode: true,
    }).then((willDelete) => {
      if (willDelete) {
        var connection = this.http
          .delete(this.RootURL + '/' + event.data.id)
          .toPromise()
          .then((data) => {
            console.log(data);
            this.flxservice.reloadData();
          });
      }
    });
  }
}

我该怎么做？