Javascript 角度=>；被动表单：遇到空输入字段时禁用按钮

例如，在表单中遇到空输入字段时，反应式表单禁用按钮的方式是什么

换句话说，当所有字段都必须满足才能启用按钮时

---

我确实知道，对于TemplateDriven方式，它是这样的：

<div class="row mt-5">
  <div class="col-md-6 mx-auto">
    <h2 class="text-center">Add Article</h2>
    <div class="card mt-3">
      <div class="card-body">
        <form [formGroup]="articleForm" (ngSubmit)="addArticle()">
          <div class="form-group">
            <label>Title</label>
            <input type="text" formControlName="title" [(ngModel)]="title" class="form-control"
                   [ngClass]="{ 'is-invalid': submitted && articleForm.controls.title.errors }"/>
            <div *ngIf="submitted && articleForm.controls.title.errors" class="text-danger">
              <div *ngIf="articleForm.controls.title.errors.required">Title is required</div>
              <div *ngIf="articleForm.controls.title.errors.minlength">At least 3 characters</div>
              <div *ngIf="articleForm.controls.title.errors.maxlength">Cannot exceed 10 characters</div>
            </div>
          </div>
          <div class="form-group">
            <label>Description</label>
            <input type="text" formControlName="description" [(ngModel)]="description" class="form-control"
                   [ngClass]="{ 'is-invalid': submitted && articleForm.controls.description.errors }"/>
            <div *ngIf="submitted && articleForm.controls.description.errors" class="text-danger">
              <div *ngIf="articleForm.controls.description.errors.required">Description is required</div>
            </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary col-md-4" [disabled]="!title || !description">Add</button>
            <a [routerLink]="['/']">
              <button type="submit" class="btn btn-primary col-md-4 ml-1">Back</button>
            </a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

然后在按钮上，我们可以通过以下方式检查事件：

[disabled]="!title || !description"

它确实有效

但是，我混合了formControlName和ngModel，这是不推荐的。 所以我想知道，如何让它以反应的方式工作

---

请保重身体。

您可以卸下ngModel

若要在表单无效时禁用按钮，您应该这样做：

<button type="submit"[disabled]="articleForm.invalid">Add</button>

添加

---

我假设您已经在ts文件中准备好了代码，并且验证程序也准备好了。

。。我在寻找更复杂的事情来完成。。非常感谢你！

<button type="submit"[disabled]="articleForm.invalid">Add</button>