Как использовать Angular 6+ Form Builder Validator?

Question

Я пытаюсь использовать этот валидатор директив формы 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>

TypeScript

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
  });

Answer 1

Самый простой способ сделать это - использовать проверку на основе угловых шаблонов, как показано ниже ..

HTML

<form name="form" #deleteform="ngForm">
  <div class="container">
    <!-- New Password -->
    <div class="row mt-2 justify-content-center">
      <div class="col">
        <span>Delete</span>
        <br />
        <kendo-switch name="deleteind" #deleteind="ngModel" [onLabel]="'Yes' [offLabel]="'No'" [(ngModel)]="deleteInd" 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>

TypeScript

import { NgForm, FormControl } from '@angular/forms';

@ViewChild('deleteform') deleteForm: NgForm;

deleteInd: boolean = false;

constructor(){
};

Обратите внимание, что при использовании ngModels с валидациями форм вы должны дать имя каждому входу внутри формы.

Подробнее о проверках форм на основе шаблонов: - https://angular.io/guide/form-validation

Answer 2

Вот рабочее решение, которое я написал:

машинопись

this.DeleteForm = this.formBuilder.group({
  DeleteInd: false,
  EmployeeID: this.EmployeeID,
  TerminateDate: moment().format("YYYY-MM-DD"),
}, {
    validator: [
      this.checkDeleteInd,
    ]
  });

checkDeleteInd(group: FormGroup) {
    let DeleteInd = group.controls.DeleteInd.value;

    return DeleteInd === false ? { DeleteIndFalse: true } : null;
}

Флажок (переключатель кендо) должен быть истинным, чтобы форма была действительной. Я просто надеялся на более простое решение, чтобы как-то использовать CheckboxRequiredValidator.

Answer 3

Я бы попробовал что-то вроде этого:

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 и введите подтверждение.Там вы должны найти необходимую информацию.

С наилучшими пожеланиями,

Сагат