<form [formGroup]="form">
  <mat-form-field style="width: 100%">
    <input matInput type="text" placeholder="نام " [(ngModel)]="service.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)]="service.price" formControlName="priceCtrl">
  </mat-form-field>
  <div [hidden]="priceCtrl.valid || priceCtrl.untouched">
    <div [hidden]="priceCtrl.valid">
      {{priceCtrl.getError("error") ? priceCtrl.getError("error") : 'لطفا قیمت محصول رو وارد کنید'}}
    </div>
  </div>
  <mat-form-field style="width: 100%" floatLabel="never" dir="rtl">
    <mat-select [(ngModel)]="service.typesIds" formControlName="typesCtrl" multiple placeholder="انتخاب نقش ها">
      <mat-option *ngFor="let type of types" [value]="type.id">
        {{ type.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <div [hidden]="typesCtrl.valid || typesCtrl.untouched">
    <div [hidden]="typesCtrl.valid">
      {{typesCtrl.getError("error") ? typesCtrl.getError("error") : 'انتخاب حداقل یک نوع ضروری می باشد '}}
    </div>
  </div>

  <mat-form-field style="width: 100%" floatLabel="never" dir="rtl">
    <mat-select placeholder="محصولات" [formControl]="productCtrl" multiple >
      <mat-option *ngFor="let product of service.products.$toArray" [value]="product.id">{{product.attributes.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>

</form>

