Angular 10 двусторонняя привязка данных в реактивной форме с использованием ngif для проверки формы

Я использую двустороннюю привязку данных в реактивной форме, но я думаю, что она не работает должным образом, потому что в условии ngif только если условие работает, а не другое условие. На этом изображении я хочу, чтобы, если администратор вводит что-нибудь еще, кроме «учитель» в поле ввода обозначения, тема будет отключите, иначе он должен быть включен для 'учитель'

Вот код

<td><div class="form-group mb-2">
        <label for="email" class=" mx-sm-3">Designation</label>
        <input type="text" formControlName="Designation"  class="form-control"  [ngClass]="{ 'is-invalid': submitted && f.Designation.errors }" #Designation/>
                    <div *ngIf="submitted && f.Designation.errors" class="invalid-feedback">
                      <div *ngIf="f.Designation.errors.required">Designation is required</div>
    </div>
      </div>
    </td>

состояние ngif

<ng-template
  *ngIf="techer();then ifShow; else ifNotShow">
</ng-template>

<ng-template #ifShow>

  <div class="form-group mb-2">
    <label for="sel1" class="mx-sm-3"> Subjects: </label>
    <select class="form-control" formControlName="Subjects" id="sel1"  [ngClass]="{ 'is-invalid': submitted && f.Subjects.errors }" >
      <option *ngFor="let account of subjects" [value]="account.Sub_Title">{{ account.Sub_Title }}</option>
    </select>
      <div *ngIf="submitted && f.Subjects.errors" class="invalid-feedback">
      <div *ngIf="f.Subjects.errors.required">Subject is required</div>
  </div>
  </div>
</ng-template>

<ng-template #ifNotShow>

  <div class="form-group mb-2">
    <label for="sel1" class="mx-sm-3"> Subjects: </label>
    <select class="form-control" formControlName="Subjects" id="sel1"  [ngClass]="{ 'is-invalid': submitted && f.Subjects.errors }" [attr.disabled]="true">
      <option *ngFor="let account of subjects" [value]="account.Sub_Title">{{ account.Sub_Title }}</option>
    </select>
      <div *ngIf="submitted && f.Subjects.errors" class="invalid-feedback">
      <div *ngIf="f.Subjects.errors.required">Subject is required</div>
  </div>
  </div>

</ng-template>

в файле component.ts

techer(){

    if(this.form.get('Designation').value === 'Teacher || teacher'){
      return !this.Tr; //Tr is boolean value which initially false
    }
    else{
      return this.Tr;
    }
  }

Пожалуйста, помогите мне решить проблему


person Ahsan Abdul Salam    schedule 11.11.2020    source источник


Ответы (1)


Ваш оператор if / else неверен, вы не можете использовать OR || в такой строке. Ваш оператор if else теперь всегда будет терпеть неудачу при первой проверке.

попробуйте использовать это вместо этого:

if (this.form.get('Designation').value.toLowerCase() === 'teacher') {

}
person Napinator    schedule 11.11.2020