Угловые значения шаблона FormArray, не привязанные к Typescript - PullRequest
Новая
       9

Угловые значения шаблона FormArray, не привязанные к Typescript

0 голосов
/ 20 сентября 2019

Я пытаюсь создать форму, которая динамически получает разрешения для клиента, а затем использует эти разрешения для создания массива формы, который динамически создает список флажков, которые администраторы могут использовать для изменения разрешений для конкретной роли клиента..

Вот шаблон: 

<form [formGroup]="roleForm" (ngSubmit)="onSubmit()">
  <div class="modal-header">
    <div class="modal-title w-100">
      <a href="#"
         class="no-underline"
         (click)="onCloseClick($event)"
         data-toggle="tooltip"
         data-placement="right"
         title="Back">
        <i class="fa fa-arrow-left text-white"></i>
      </a>
      <span *ngIf="clientRole.id; else elseBlock">Edit Role</span>
      <ng-template #elseBlock>Add Role</ng-template>
    </div>
    <button class="btn btn-primary float-right round-button"
            type="submit"
            [disabled]="!roleForm.valid"
            title="Save Role">
      <i class="fa fa-save"></i>
    </button>
  </div>
  <div class="modal-body">

    <div class="row">
      <div class="col">
        <div class="form-group">
          <label>Name<span class="k-required text-danger">*</span></label>
          <input class="form-control form-control-sm" type="text" formControlName="name" />
          <div class="error-container text-danger" *ngIf="name.invalid && (name.dirty || name.touched)">
            <div *ngIf="name.errors.required" class="font-weight-normal">
              Name is required
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <div class="form-group">
          <label>Description<span class="k-required text-danger">*</span></label>
          <input class="form-control form-control-sm" type="text" formControlName="description" />
          <div class="error-container text-danger" *ngIf="description.invalid && (description.dirty || description.touched)">
            <div *ngIf="description.errors.required" class="font-weight-normal">
              Description is required
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <div class="form-group">
          <label style="display:block;">Permissions:</label>
            <label class="form-control form-control-sm" formArrayName="permissions" *ngFor="let permission of roleForm.controls.permissions.controls; let i=index">
              <input type="checkbox" formControllerName="i"/>
              {{clientPermissions[i].name}} - {{clientPermissions[i].description}}
              <br />
            </label>
        </div>
      </div>
    </div>

  </div>
</form>

Пожалуйста, посмотрите на последнюю часть формы, которая является массивом форм.Когда я загружаю его, форма отображается, как и ожидалось, и вот как я это делаю: 

ngOnInit() {
    this.createForm();
      if (this.clientRole.id) {
      this.setValues();
      }
      else {
        this.clientRole.clientId = this.clientId;
        }  
  }

createForm() {
    this.roleForm = this.fb.group({
      name: [null, Validators.required],
      description: [null, Validators.required],
      permissions: new FormArray([])
    });
    this.clientPermissionService.getClientPermissions(this.clientRole.clientId).subscribe(items => {
      this.clientPermissions = items;
      this.clientPermissions.forEach((o, i) => {
        const control = new FormControl();
        (this.roleForm.controls.permissions as FormArray).push(control)
      });      
    });
  }

Однако проблема возникает, когда я пытаюсь сделать onSubmit (): 

onSubmit(){
const selectedPermissionsId = this.roleForm.value.permissions.map((v, i) => v ? this.clientPermissions[i].id : null).filter(v => v !== null);
    console.log(selectedPermissionsId);
}

Я всегда получаю значение formArray как пустой массив независимо от того, что я выбираю в шаблоне.Что мне здесь не хватает?

...