<form [formGroup]="form">
  <mat-form-field style="width: 100%">
    <input matInput type="text" placeholder="نام" [(ngModel)]="units.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%">
    <mat-select  [(ngModel)]="units.universityIds"  placeholder="دانشگاه" formControlName="uniCtrl" multiple>
        <mat-option *ngFor="let uni of universities.$toArray" [value]="uni.id">
          {{ uni.name }}
        </mat-option>
    </mat-select>
  </mat-form-field>


  <mat-form-field style="width: 100%">
    <mat-select  [(ngModel)]="units.citiesIds"  placeholder="شهرها " formControlName="cityCtrl" multiple>
      <mat-option *ngFor="let city of cities.$toArray" [value]="city.id">
        {{ city.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>

