时间戳

首页 > 解决方案 > 使用 ngif 进行表单验证的反应式表单中的 Angular 10 双向数据绑定

angular-ng-if - 使用 ngif 进行表单验证的反应式表单中的 Angular 10 双向数据绑定

问题描述

我正在以反应形式使用两种方式的数据绑定，但我认为它不能正常工作，因为在 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;
    }
  }

请帮我解决问题

标签： angular-ng-ifangular10two-way-binding

解决方案

您的 if/else 语句不正确，您不能使用 OR || 像这样的字符串中的运算符。您的 if else 语句现在在第一次检查时总是会失败。

尝试改用它：

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

}

推荐阅读