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"。因此，从所有这些注释中，您的（缩短的）代码应类似于：

<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，即使没有单击功能，单击按钮时也会提交表单。

确保在提交之前填写字段

1 个答案: