Html 确保在提交前填写字段

我正在创建一个Web表单供用户填写。我想在用户按下提交按钮之前填写所有字段。“提交”按钮将被禁用，直到填写所需字段。但是，即使设置了字段，按钮也不会激活

[！[查看页面][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>

---

我建议你深入研究反应形式，它们很棒。一开始可能会让人困惑，但完全值得。但是您已经启动了一个模板驱动的表单。我建议您在文档中阅读更多关于它们的内容，因为您缺少一些重要的东西

首先，不要用

id

标记表单，它应该是一个模板引用：

#testForm=“ngForm”

。如果表单控件中缺少

name

属性，则

name

属性与ngModel一起将表单控件注册到表单中。您采用ngModel的方式有两种不同。或者使用ngModel创建变量，就像使用双向绑定在一个字段上一样，例如：

[（ngModel）]=“selectedSupervisor2”

。如果字段上没有变量绑定，则需要在字段上仅标记

ngModel

，以便注册表单控件

若你们想在表单无效时禁用按钮，你们应该使用

[disabled]=“！testForm.valid”

。因此，从所有这些注释中，您的（缩短的）代码应该如下所示：

---

当您传递要提交的表单值时，您可以在该对象中整齐地获得值。此外，无需向按钮添加单击事件，因为表单中的按钮默认为类型

submit

，并且在单击按钮时，表单将被提交，即使没有单击功能。

man！如果您在angular应用程序内部使用jquery，那么您就做错了！！从角度看反应形式，以验证您的形式是否完全符合Reza。如果没有很好的理由，不要在angular中使用jquery。Angular有自己的工具来做这样的事情。在这里，jQuery完全没有必要。请阅读表格：@Reza谢谢，我确实看了一下，男孩谢谢你给我指出了正确的方向。我仍然有一个问题，我已经更新了我的原始版本post@AJT_82谢谢你的链接。我读了一遍，并编辑了我的问题。如果你能帮我看看，我会很感激的。非常感谢你。我阅读了基于模板的表单，它给了我巨大的帮助。接下来我将尝试制作一个反应式表单！太好了，很高兴听到有帮助！是的，反应形式有很棒的东西和内在的功能。特别是当您查看数组时，被动窗体具有

FormArray

。在模板驱动的表单中，数组并不容易处理。所以学习反应式表单是完全值得的：）祝你好运，编码愉快！