Angular - 如果输入为空，则禁用按钮不起作用

Question

我有这样的输入：

<mat-form-field *ngFor="let d of data">
    <mat-label>Item</mat-label>
    <input [(ngModel)]="d.item" matInput required>
</mat-form-field>`

我试过这个：

 <form #inputForm="ngForm">
        <mat-form-field *ngFor="let d of data">
            <mat-label>Item</mat-label>
            <input [name]="d.item" [(ngModel)]="d.item" matInput required>
        </mat-form-field>
    </form> 

<button class="confirmButton" [disabled]="!inputForm.valid" mat-button [mat-dialog-close]="data">Send</button>

但是当我在其中一个输入按钮中键入内容时，是否启用了此功能？

Answer 1

您应该对动态创建的表单使用响应式表单。

响应式表单提供了一种模型驱动的方法来处理值随时间变化的表单输入。本指南向您展示了如何创建和更新基本表单控件、如何在组中使用多个控件、验证表单值以及创建动态表单，您可以在运行时在其中添加或删除控件。

见here

Answer 2

在您的 html 中：

<form [formGroup]="testForm" (ngSubmit)="onSubmit()">
    <label>
    Required Field:
    <input type="text" formControlName="requiredField" required>
  </label>

    <button type="submit" [disabled]="!testForm.valid">Submit</button>
</form>

然后在你的组件中：

  testForm = this.fb.group({
    requiredField: ['', Validators.required]
  });

  constructor(private fb: FormBuilder) { }