<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>
  <div [hidden]="emailCtrl.valid || emailCtrl.untouched">
    <div [hidden]="emailCtrl.valid">
      {{emailCtrl.getError("error") ? emailCtrl.getError("error") : 'لطفاایمیل خود را وارد کنید '}}
    </div>
  </div>
  <mat-form-field style="width: 100%">
    <input matInput type="password" placeholder="رمز عبور " [(ngModel)]="user.password" formControlName="passwordCtrl">
  </mat-form-field>
  <div [hidden]="passwordCtrl.valid || passwordCtrl.untouched">
    <div [hidden]="passwordCtrl.valid">
      {{passwordCtrl.getError("error") ? passwordCtrl.getError("error") : 'لطفا رمز خود را وارد نمایید '}}
    </div>
  </div>
  <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.type2.id" formControlName="typesCtrl" placeholder="نوع">
      <mat-option *ngFor="let type of types" [value]="type.id"
      >
        {{ type.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field style="width: 100%" floatLabel="never" dir="rtl">
    <mat-select [(ngModel)]="user.role.id" formControlName="rolesCtrl" placeholder="نقش">
      <mat-option *ngFor="let role of roles" [value]="role.id">
        {{role.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>

