确保在提交前填写字段

Question

我正在创建一个供用户填写的网络表单。我希望在用户按下提交按钮之前填写所有字段。在填写必填字段之前，提交按钮处于禁用状态。但是，即使设置了字段，该按钮也不会变为活动状态。

[![页面视图][1]][1]

<form (ngSubmit)="onSubmit()" id="testForm" ngNativeValidate>

 <p-dropdown [options]="supervisor2" [(ngModel)]="selectedSupervisor2"placeholder="Select a Supervisor*" optionLabel="name" [ngModelOptions]="{standalone: true}" required ></p-dropdown>

 <p-dropdown  [options]="leaveCodes2" placeholder="Leave Code*" optionLabel="name" required></p-dropdown>



  <p-calendar  [showIcon]="true" [minDate]="minDate" [readonlyInput]="true" placeholder="From Date*"
              id="setter" required >
            </p-calendar>

 <button pButton type="submit" label="Submit" [disabled]="!testForm" (click)="submit()" class="ui-button-success"
            id="righter"></button>
</form>

Answer 1

我建议您深入研究响应式表单，它们很棒。一开始可能会令人困惑，但完全值得。但是您已经开始使用模板驱动的表单。我建议你在文档中阅读更多关于它们的信息，因为你缺少一些关键的东西。

首先，不要用id标记表单，它应该是一个模板引用：#testForm="ngForm"。然后您缺少表单控件中的name 属性，name 属性与 ngModel 一起将表单控件注册到表单。合并 ngModel 的方式可以有两种不同的方式。要么你有一个使用 ngModel 的变量，就像你在一个字段上使用双向绑定一样，例如：[(ngModel)]="selectedSupervisor2"。如果您没有在字段上绑定变量，则只需在字段上标记ngModel，以便注册表单控件。

如果您想在表单无效时禁用按钮，您应该使用[disabled]="!testForm.valid"。因此，从所有这些 cmets 中，您的（缩短的）代码应如下所示：

<form (ngSubmit)="onSubmit(testForm.value)" #testForm="ngForm">
  <p-dropdown [(ngModel)]="selectedSupervisor2" name="supervisor" required></p-dropdown>
  <p-dropdown name="leaveCode" ngModel required></p-dropdown>
  <p-calendar name="fromDate" ngModel required></p-calendar>
  <button pButton [disabled]="!testForm.valid"></button>
</form>

当您将表单值传递给提交时，您会在该对象中整齐地获取值。也不需要给按钮添加点击事件，因为表单中的按钮默认是submit类型的，当点击按钮时，表单将被提交，即使没有点击功能。