<form [formGroup]="form">
  <mat-form-field style="width: 100%">
    <input matInput type="text" placeholder="نام" [(ngModel)]="city.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)]="city.prefix_code" formControlName="prefix_codeCtrl">
  </mat-form-field>
  <div [hidden]="prefix_codeCtrl.valid || prefix_codeCtrl.untouched">
    <div [hidden]="prefix_codeCtrl.valid">
      {{prefix_codeCtrl.getError("error") ? prefix_codeCtrl
      .getError("error") : 'این فیلد ضروری است'}}
    </div>
  </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>

