时间戳

首页 > 解决方案 > 如何使用 Angular 6+ 表单生成器验证器？

angular - 如何使用 Angular 6+ 表单生成器验证器？

问题描述

我正在尝试使用这个 Angular 6+ 表单指令验证器：CheckboxRequiredValidator。我不明白如何使用它。在选中复选框之前，该表单不应有效。

HTML

<form [formGroup]="DeleteForm" (ngSubmit)="deleteEmployee(DeleteForm)">
  <div class="container">
    <!-- New Password -->
    <div class="row mt-2 justify-content-center">
      <div class="col">
        <span>Delete</span>
        <br />
        <kendo-switch formControlName="DeleteInd" [onLabel]="'Yes'" [offLabel]="'No'" required >
        </kendo-switch>
      </div>
    </div>
    <!-- Submit -->
    <div class="row mt-2 justify-content-center">
      <div class="col">
        <button kendoButton [disabled]="!DeleteForm.valid" [primary]="true" type="submit">Submit</button>
      </div>
    </div>
  </div>
</form>

打字稿

import {
  FormGroup,
  FormBuilder
} from '@angular/forms';

public DeleteForm: FormGroup;

constructor(
    private formBuilder: FormBuilder,
) {
    this.DeleteForm = this.formBuilder.group({
    DeleteInd: false,
    EmployeeID: 999,
    TerminateDate: moment().format("YYYY-MM-DD"),
  }, {
    validator: CheckboxRequiredValidator     // this is wrong
  });

标签： angularformsvalidation

解决方案

我会尝试这样的事情：

import {
  FormGroup,
  FormBuilder,
  Validators 
} from '@angular/forms';

public DeleteForm: FormGroup;

constructor(private formBuilder: FormBuilder) {
    this.DeleteForm = this.formBuilder.group({
     ...
    deleteInd: [false, Validators.required]
});

有关更多信息，请参阅角度文档：https ://angular.io/guide/reactive-forms ctrl + f 并输入验证。在那里你应该找到必要的信息。

最好的祝福，

萨加特

推荐阅读