Question

当页面加载时，我隐藏了提交按钮，我只想在文本框2中的值与文本框1的值匹配时显示它

HTML

<ion-item>
  <ion-label floating>Reading</ion-label>
  <ion-input type="number" formControlName="readFirst"  [(ngModel)]="readFirst"></ion-input>
</ion-item>

<ion-item>
  <ion-label floating>Retype Reading</ion-label>
  <ion-input  (ngModelChange)="checkValues($event)" type="number" formControlName="readSecond"  [(ngModel)]="readSecond"></ion-input>
</ion-item>
<br>
<button *ngIf="showButton" ion-button block icon-left>
  <ion-icon name="send"></ion-icon>
  Submit Reading</button>

JS

  checkValues(){
    if(this.readSecond===this.readFirst){
      this.showButton = true;
    }else{
      this.showButton = false;
    }
  }

使用我的代码，即使值不匹配，该按钮也会禁用

Answer 1

试试这个：

checkValues(val: string){
  if(val === this.readFirst){
    this.showButton = true;
  }else{
    this.showButton = false;
  }
}

修改

我还会显示按钮，因为当没有按钮可见时可能会让人感到困惑，因此我会使用*ngIf代替[disabled]="!showButton"指令。

编辑v2：

您可以在这里查看stackblitz的简化版本： https://stackblitz.com/edit/ionic-9gwarw?embed=1&file=pages/home/home.html

Answer 2

您没有提供HTML填充的完整代码，但作为您的HTML代码，您不需要使用formControlName来提供：

formControlName必须与parentGroup指令一起使用

所以我必须删除formControlName，这是你的答案问题：

<ion-content padding>
      <ion-item>
        <ion-label floating>Reading</ion-label>
        <ion-input type="number" [(ngModel)]="readFirst"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Retype Reading</ion-label>
        <ion-input  (ngModelChange)="checkValues($event)" type="number"  [(ngModel)]="readSecond"></ion-input>
      </ion-item>
      <br>
      <button *ngIf="showButton" ion-button block icon-left>
        <ion-icon name="send"></ion-icon>
        Submit Reading</button>
</ion-content>

这是Ts文件代码：

checkValues(event){
    console.log(typeof event) //Type of Value is String
    this.readSecond = event; 
    console.log(typeof this.readFirst); //Type of Value is String 

    if(this.readSecond===this.readFirst){
      this.showButton = true;
    }else{
      this.showButton = false;
    }
  }

如果将 this.readFirst 和 this.readSecond 属性定义为类型编号，但 ngModel 不会给出整数。它给出了一个字符串。

有时您可以通过在输入框中键入this.readSecond的值来查看，this.readSecond会给出 undefined 值。 因为当Angular尝试在模型实际具有值之前将模型绑定到视图时会发生这种情况。因此可能导致您的函数出错。

最好将this.readSecond变量与从 ngModelChange 方法传递的事件相等。

checkValues(event){
    this.readSecond = event;
}

这是第一次加载页面时的视图：

这是您在第二个字段中输入数字后的视图： 如果两个字段相等，则按钮将显示

如果值是相同的ionic2，则显示按钮

2 个答案: