angular - 根据文本框 Angular 4 中输入的值启用/禁用按钮 - 初始加载不起作用

Question

我需要启用/禁用下面的按钮，并且我有下面的代码。只有从第二次开始它才能正常工作。最初，当我登陆页面时，该按钮应该被禁用，因为我在输入框中没有值。如果我在文本框中输入某些内容并将其删除，该按钮将被禁用。当我以 Angular 4 登陆页面时，如何禁用第一个按钮

<input type="email" class="form-control" id="inputValue"  placeholder="johndoe@company.com" formControlName="inputValue">
 <button type="button" id="verifyBtn" [disabled]="inputValue === ''" class="btn btn-primary btn-large" (click)="verify()">Verify</button>

Answer 1

您可以这样设置输入:

[disabled]="!inputValue"

因为inputValue值一开始就没有设置，是未定义的，所以当你检查inputValue === ''时会是false

[根据评论更新]
如果您使用双向的[(ngModel)]，则需要小心从 View 到 Controller 的数据输入以及从 Controller 到 View 的输出。很多时候，这是一个糟糕的设计。

因为您使用的是fromControlName，即reactiveForm，所以您应该只使用reactiveForm和subscription来处理输入值。您可以查看post