<form [formGroup]="form">
  <mat-form-field style="width: 100%">
    <input matInput type="text" placeholder="نام" [(ngModel)]="role.name" formControlName="nameCtrl">
  </mat-form-field>
  <div [hidden]="nameCtrl.valid || nameCtrl.untouched">
    <div [hidden]="nameCtrl.valid">
      {{nameCtrl.getError("error")? nameCtrl.getError("error") : 'لطفا نام  را وارد کنید '}}
    </div>
  </div>
  <mat-form-field style="width: 100%">
    <input matInput type="text"  placeholder="اسلاگ" [(ngModel)]="role.slug" formControlName="slugCtrl">
  </mat-form-field>
  <div [hidden]="slugCtrl.valid || slugCtrl.untouched">
    <div [hidden]="slugCtrl.valid">
      {{slugCtrl.getError("error")? slugCtrl.getError("error") : 'لطفا اسلاگ  را وراد کنید '}}
    </div>
  </div>
  <mat-form-field style="width: 100%">
  <mat-select  [(ngModel)]="role.permissionsIds"  placeholder="دسترسی" formControlName="permissionsCtrl" multiple>
    <mat-optgroup *ngFor="let group of permissionGroups.$toArray" [label]="group.name">
      <mat-option *ngFor="let permission of group.permissions.$toArray" [value]="permission.id">
        {{ permission.name }}
      </mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>
  <div [hidden]="permissionsCtrl.valid || permissionsCtrl.untouched">
    <div [hidden]="permissionsCtrl.valid">
      {{permissionsCtrl.getError("error")? permissionsCtrl.getError("error") : 'انتخاب حداقل یک نوع ضروری می باشد '}}
    </div>
  </div>
  <mat-dialog-actions>
  <button mat-raised-button  color="primary" (click)="onSubmit()">ثبت</button>
  <button mat-raised-button (click)="close()">بازگشت</button>
</mat-dialog-actions>
  <div class="my-container">
    <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>
  </div>
</form>

