Question

我正在尝试不使用以下内容（在我的 app.component.html 中）

<input type="text" class="form-control" [(ngModel)]="username">

<button class="btn btn-primary" [disabled]="username === ''" (click)="onResetUser()">
    Reset User
</button>

使用 app.component.ts 中的逻辑

export class AppComponent {

  username: string = "";

  onResetUser() {
    this.username = "";
  }
}

而是让以下动态工作：

<input type="text" class="form-control" (input)="onUpdateUsername($event)">

<button class="btn btn-primary" [disabled]="usernameFieldEmpty" (click)="onResetUser()">
    Reset User
</button>

和逻辑：

export class AppComponent {

  username: string = "";
  usernameFieldEmpty: boolean = true;

  onResetUser() {
    this.username = "";
    this.usernameFieldEmpty = true;
  }

  onUpdateUsername(event: any) {
    this.username = event.target.value;
    this.setUsernameFieldStatus();
  }

  setUsernameFieldStatus() {
    this.username === "" ? 
      this.usernameFieldEmpty = true : 
      this.usernameFieldEmpty = false;
  }
}

禁用部分工作正常，但在第二种情况下，当我单击重置按钮时，输入字段的内容没有清除。我错过了什么？

Answer 1

您永远不会将值传递回您的输入。以下应该可以解决问题。

READ COB_ID: 123
READ COB_ID: 12345678

角度输入文本字段不会用空字符串动态清除

1 个答案: