<form [formGroup]="form">
  <mat-form-field style="width: 100%">
    <input matInput type="text" placeholder="نام "  [(ngModel)]="permission.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="slug " [(ngModel)]="permission.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%" floatLabel="never" dir="rtl">
    <mat-select [(ngModel)]="permission.group.id"  formControlName="groupCtrl" >
      <mat-option *ngFor="let groups of group" [value]="groups.id">
        {{ groups.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <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>

