表单控件为空时禁用角度按钮

Question

当文本框为空时，我需要禁用搜索按钮。 我尝试向搜索按钮添加禁用属性。 但它不工作。

这是我的 html 代码：

<div class="col-md-5 pl-0">
  <div class="input-group mb-3">
    <input
      type="text"
      placeholder="Enter MTCN Number"
      maxlength="16"
      class="form-control mtcn-textbox"
      [formControl]="mtcn"
      required
      type="text"
      aria-describedby="basic-addon2"
    />
    <div class="input-group-append">
      <button
        class="btn btn-primary"
        type="button"
        (click)="retrieveData()"
        [disabled]="mtcn"
      >
        Search
      </button>
    </div>
  </div>
</div>

有人可以帮助我实现这一目标吗？

Answer 1

您可以仅使用[disabled]="!mtcn.value"禁用您的按钮。 或者，如果您的表单无效，您可以禁用按钮： [disabled]="!myForm.valid"

Answer 2

您可以尝试 [disabled]="!mtcn.value" 或将您的代码放入 Form 标签并为其指定一个 id 并使用“form.valid”

Answer 3

请注意mtcn是一个 FormControl，它总是真实的。 您想检查 FormControl 的值。

你有 2 种可能性。

1.禁用属性

<div class="input-group mb-3">
  <input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button" (click)="retrieveData()" [disabled]="!mtcn.value">Search</button>
  </div>
</div>

2.禁用类（因为您似乎正在使用引导程序）

<div class="input-group mb-3">
  <input type="text" placeholder="Enter MTCN Number" maxlength="16" class="form-control mtcn-textbox" [formControl]="mtcn" required type="text" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button" (click)="retrieveData()" [ngClass]="{ disabled: !mtcn.value }">Search</button>
  </div>
</div>

Answer 4

[disabled]="!mtcn.value"会起作用，但我强烈建议不[disabled]="!mtcn.value" 。 假设您想添加一些其他验证规则（长度、模式等） - 您需要在表单控件本身和按钮中重复相同的事情两次。 从长远来看，维护和引入错误会变得乏味。

去吧

<button [disabled]="mtcn.invalid">

编辑：哦，如果您使用[formControl] ，请将验证规则放在 TypeScript 的mtcn定义中，而不是模板中，现在您正在混合模型驱动和模板驱动的表单。