<form [formGroup]="form" dir="rtl">
  <mat-form-field style="width: 100%">
    <input matInput placeholder="لطفا آدرس خود را وارد کنید " formControlName="addressCtrl">
  </mat-form-field>
  <!--<div [hidden]="addressCtrl.valid || addressCtrl.untouched">-->
  <!--<div [hidden]="addressCtrl.valid">-->
  <!--{{addressCtrl.getError("error")? addressCtrl.getError("error") : 'لطفا آدرس خود را وارد کنید  '}}-->
  <!--</div>-->
  <!--</div>-->
  <br>
  <mat-form-field>
    <input type="text" placeholder="سرویس خود راانتخاب کنید"
           matInput [formControl]="serviceCtrl" #serviceElement
           [matAutocomplete]="auto" >
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let service of filteredServices "
                  (click)="newServiceSelected(service.id,service.getName(),service.getPrice())"
              >
        {{service.getName()}} {{service.getPrice()}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <br>
  <div *ngIf="selectedServices ; then autoComplete"></div>
  <button mat-button  color="primary"(click)="Onsubmit()" [disabled]="!submit || !addressCtrl.valid">ارسال</button>
  <button mat-button  color="primary" (click)="Exit()">بازگشت</button>
</form>
<ng-template  #autoComplete>
  <mat-list>
    <mat-list-item *ngFor=" let servicePivots of selectedServicePivots">
      <p>{{ servicePivots.name}}</p>
      <button mat-button color="primary" (click)="inc(servicePivots)"><mat-icon>add</mat-icon></button>
          <input type="text" [(ngModel)]="servicePivots.num" style="width: 50px">

      <button mat-button color="primary" (click)="dec(servicePivots) "><mat-icon>remove</mat-icon></button>
      <br>
      <input type="text" [value]="servicePivots.price*servicePivots.num" style="width: 50px">
    </mat-list-item>
    <p> جمع کل: {{sumPrice}}</p>
  </mat-list>
</ng-template>



