<form [formGroup]="form">
  <mat-form-field style="width: 100%">
    <input matInput type="text" placeholder="نام"
           [(ngModel)]="user.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)]="user.email"
           formControlName="emailCtrl">
  </mat-form-field>
  <mat-form-field style="width: 100%">
    <input matInput type="text" placeholder="رمز عبور "
           [(ngModel)]="user.password"
           formControlName="passwordCtrl">
  </mat-form-field>

  <mat-form-field style="width: 100%">
    <input matInput type="text" placeholder="موبایل"
           [(ngModel)]="user.mobile"
           formControlName="mobileCtrl">
  </mat-form-field>
  <div [hidden]="mobileCtrl.valid || mobileCtrl.untouched">
    <div [hidden]="mobileCtrl.valid">
      {{mobileCtrl.getError("error") ? mobileCtrl.getError("error") : ' این فیلد ضروری می باشد '}}
    </div>
  </div>

  <mat-form-field style="width: 100%" floatLabel="never" dir="rtl">
    <mat-select [(ngModel)]="user.role.id"  formControlName="roleCtrl"
                placeholder="نقش">
      <mat-option *ngFor="let role of roles" [value]="role.id"
      >
        {{ role.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <div style="direction: rtl">
    <label style="font-family: iransans">
      enable
    </label>
    <mat-dialog-actions  style="display: inline !important;">
      <mat-radio-group [(ngModel)]="user.enable" formControlName="enableCtrl">
        <mat-radio-button value="true">فعال </mat-radio-button>
        <mat-radio-button value="false">غیر فعال </mat-radio-button>
      </mat-radio-group>
    </mat-dialog-actions>
  </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>
