Почему mat-error работает на MatDialog, а не на обычной странице?

Question

У меня есть обычная HTML-страница с полем ввода и кнопкой.

Пользователь вводит некоторое значение в поле ввода, и приложение отправляет HTTP-запрос.

Если с HTTP-ответом все в порядке, пользователь переходит на какую-то другую страницу, в противном случае ошибка матотображается предупреждение пользователя о том, что его поиск недействителен.

В моем диалоговом окне у меня точно такой же сценарий.

Проблема, с которой я сталкиваюсь, заключается в том, что на обычной странице мне приходитсянажмите кнопку два раза, чтобы появилась ошибка мата, однако в диалоговом окне мата ошибка мата появляется мгновенно.

Код точно такой же.

Этомой код:

MyComponent.component.ts & MyDialog.component.ts

public inputForm: FormControl;

ngOnInit() {
  this.inputForm = new FormControl('');
}

private getData(value: any, returnType: string) {
  if (value === undefined || value === "") {
    this.inputForm.setErrors({ 'invalid': true });
  } else {
    this.getOrder(value, returnType);
  }
}

private getOrder(value: any, returnType: string) {
  if (value.length > 0 && !isNaN(value)) {
    this.getOrderByID(value, returnType);
  } else if (value.length > 0 && isNaN(value)) {
    this.getOrderByNumber(value, returnType);
  }
}

private getOrderByID(value: number, returnType: string) {
  this.rest.getOrder(value).subscribe((orderIdData: {}) => {
    if (Object.entries(orderIdData).length !== 0) {
      this.rest.getReturnByOrderId(value).subscribe((returnOrdIdData: Return[]) => {
        if (Object.entries(returnOrdIdData).length !== 0) {
      this.returns = returnOrdIdData;
    } else {
      this.returns = [];
    }
    this.onCreateReturn(orderIdData, returnType);
      }, error => {
    if (error.status === 404) {
      this.returns = [];
    }
    this.onCreateReturn(orderIdData, returnType);
      });
    } else {
      this.inputForm.setErrors({ 'invalid': true });
    }
  }, error => {
    this.inputForm.setErrors({ 'invalid': true });
  });
}

private getOrderByNumber(value: string, returnType: string) {
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.rest.getReturnByOrderNumber(value).subscribe((returnOrdNrData: Return[]) => {
        if (Object.entries(returnOrdNrData).length !== 0) {
      this.returns = returnOrdNrData;
    } else {
      this.returns = [];
    }
    this.onCreateReturn(orderNrData, returnType);
      }, error => {
    if (error.status === 404) {
      this.returns = [];
    }
    this.onCreateReturn(orderNrData, returnType);
      });
    } else {
      this.inputForm.setErrors({ 'invalid': true });
    }
  }, error => {
    this.inputForm.setErrors({ 'invalid': true });
  });
}

private getErrorMessage() {
  return (<HTMLInputElement>document.getElementById("input-form-id")).value === "" ? 'Este campo é obrigatório!' : 'A encomenda que inseriu não existe!';
}

private onCreateReturn(el: {}, returnType: string) {
  this.setData(el, returnType);
  this.router.navigate(['returns-create']);
}

private isInputInvalid() {
  if (this.inputForm.invalid) return true;
    return false;
}

MyComponent.component.html & MyDialog.component.html

<div class="row">
  <div class="col-2 order-label">Order: </div>

  <div class="col-8 search-div">
    <mat-form-field class="search-form-field" appearance="standard">
      <input matInput class="order-input" id="input-form-id" placeholder="Ex: EU030327" [formControl]="inputForm" #searchInput>
      <mat-error *ngIf="isInputInvalid()">{{ getErrorMessage() }}</mat-error>
      <mat-hint>Insira o ID ou o Nº de uma encomenda.</mat-hint>
    </mat-form-field>
  </div>

  <div class="col-2"></div>
</div>

<br>

<button mat-raised-button color="accent" (click)="getData(searchInput.value, 'Refund')" [disabled]="isInputInvalid()">Refund</button>

Мне нужно, чтобы mat-error появлялся, когда ответ возвращает ошибку, или ответ пустой, однако это только в случаеКомпонент MyDialog ...

Почему это происходит?

Спасибо!

Answer 1

Для тех, кто может столкнуться с этой проблемой после нескольких дней проб и ошибок, я нашел рабочее решение ...

Я создал логическое значение isInputInvalid и по умолчанию установил для него значение true.Всякий раз, когда я нажимаю кнопку, выполняется HTTP-запрос, и, в зависимости от ответа, логическое значение isInputInvalid устанавливается в значение true или false.Если HTTP-ответ недействителен, я устанавливаю его в true, если он действительный, я устанавливаю его в false.

Затем, если логическое значение true, я устанавливаю свой Контроль формы как недействительный.

Inмой HTML-файл Я окружил свой ввод <form> и создал [formGroup].Для проверки ошибок я установил *ngIf внутри <mat-error> равным searchForm.controls['inputForm'].invalid.

Вот мой код:

MyComponent.component.ts

private searchForm: FormGroup;
private isInputInvalid: boolean = true;

ngOnInit() {
  this.searchForm = new FormGroup({
    inputForm: new FormControl('')
  });
}

private getData(value: any, returnType: string) {
  if (value === undefined || value === "") {
    this.inputForm.setErrors({ 'invalid': true });
  } else {
    this.getOrder(value, returnType);
  }
}

private getOrder(value: any, returnType: string) {
  if (value.length > 0 && !isNaN(value)) {
    this.getOrderByID(value, returnType);
  } else if (value.length > 0 && isNaN(value)) {
    this.getOrderByNumber(value, returnType);
  }
}

private getOrderByID(value: number, returnType: string) {
  this.rest.getOrder(value).subscribe((orderIdData: {}) => {
    if (Object.entries(orderIdData).length !== 0) {
      this.rest.getReturnByOrderId(value).subscribe((returnOrdIdData: Return[]) => {
        if (Object.entries(returnOrdIdData).length !== 0) {
          this.isInputInvalid = false;
          this.returns = returnOrdIdData;
        } else {
          this.isInputInvalid = false;
          this.returns = [];
        }
        this.onCreateReturn(orderIdData, returnType);
      }, error => {
        this.isInputInvalid = true;
        if (error.status === 404) {
          this.returns = [];
        }
        this.onCreateReturn(orderIdData, returnType);
      });
    } else {
      this.isInputInvalid = true;
    }
  }, error => {
    this.isInputInvalid = true;
  });

  if(this.isInputInvalid){
    this.searchForm.controls['inputForm'].setErrors({ 'invalid': true });
  }
}

private getOrderByNumber(value: string, returnType: string) {
  this.rest.getOrderByNumber(value).subscribe((orderNrData: {}) => {
    if (Object.entries(orderNrData).length !== 0) {
      this.rest.getReturnByOrderNumber(value).subscribe((returnOrdNrData: Return[]) => {
        if (Object.entries(returnOrdNrData).length !== 0) {
          this.isInputInvalid = false;
          this.returns = returnOrdNrData;
        } else {
          this.isInputInvalid = false;
          this.returns = [];
        }
        this.onCreateReturn(orderNrData, returnType);
      }, error => {
        this.isInputInvalid = true;
        if (error.status === 404) {
          this.returns = [];
        }
        this.onCreateReturn(orderNrData, returnType);
      });
    } else {
      this.isInputInvalid = true;
    }
  }, error => {
    this.isInputInvalid = true;
  });

  if(this.isInputInvalid){
    this.searchForm.controls['inputForm'].setErrors({ 'invalid': true });
  }
}

private getErrorMessage() {
  return (<HTMLInputElement>document.getElementById("input-form-id")).value === "" ? 'Este campo é obrigatório!' : 'A encomenda que inseriu não existe!';
}

private onCreateReturn(el: {}, returnType: string) {
  this.setData(el, returnType);
  this.router.navigate(['returns-create']);
}

MyComponent.component.html

<div class="row">
  <div class="col-2 order-label">Order: </div>

  <div class="col-8 search-div">
    <form [formGroup]="searchForm">
      <mat-form-field class="search-form-field" appearance="standard">
        <input matInput class="order-input" id="input-form-id" placeholder="Ex: EU030327" formControlName="inputForm" #searchInput>
        <mat-error *ngIf="searchForm.controls['inputForm'].invalid">{{ getErrorMessage() }}</mat-error>
        <mat-hint>Insira o ID ou o Nº de uma encomenda.</mat-hint>
      </mat-form-field>
    </form>
  </div>

  <div class="col-2"></div>
</div>

<br>

<button mat-raised-button color="accent" (click)="getData(searchInput.value, 'Refund')" [disabled]="searchForm.controls['inputForm'].invalid">Refund</button>