Доступ к группе форм в пользовательском валидаторе - PullRequest
Новая
       27

Доступ к группе форм в пользовательском валидаторе

0 голосов
/ 10 июня 2019

Я пытаюсь добавить собственный валидатор в мой component.ts

customvalidatorFile: 

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

export class ProfileCustomValidators {

    static validateTime(fg: FormGroup): ValidationErrors {
        const staffForm = fg.get('staffForm')
        const fromTime = staffForm.get('fromTime').value;
        const toTime = staffForm.get('toTime').value;
        if(fromTime > toTime) {
            return {
                'endTime': {
                    message: 'End time should be greater than start time'
                }
            }
        }
        return null;
    }
}

component.ts 

export class StaffFrom implements onInit {
staffForm: FormGroup;

constructor(private fb: FormBuilder){}


ngOnInit() {
  this.staffForm = this.fb.group({
      fromTime: new FormControl(null, Validators.required),
      toTime: new FormControl(null, Validators.required),
}{ validator: ProfileCustomValidators.validateTime})
}

Component.html 

<div>
  <form [formGroup]="staffForm">
       <mat-form-field>
        <input
          type="time"
          required
          formControlName="fromTime"
          matInput
          placeholder="From"
        />
      </mat-form-field>
      <mat-form-field>
        <input
          type="time"
          required
          formControlName="toTime"
          matInput
          placeholder="To"
        />
      </mat-form-field>
  </form>
</div>

Используя приведенный выше код, я получаю следующую ошибку 

Cannot read property 'get' of null

Мне нужна помощь в исправлении этой проблемы, а также в том, как получить доступ к staffForm в файле custom.validator, поскольку он возвращает значение NULL.Спасибо.

1 Ответ

1 голос
/ 10 июня 2019

Здесь обновляется рабочий код

Файл Customvalidator: profilecustome.validator.ts 

import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';

export class ProfileCustomValidators {

    static validateTime(): ValidatorFn {
        return (c: AbstractControl) => {
            const fromTime = c.get('fromTime').value;
            const toTime = c.get('toTime').value;
           if(fromTime > toTime) {
            return {
                'toTime': true
            }
          }
          return null;
        };
    }
}

module.ts 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule
} from '@angular/material';

import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ ReactiveFormsModule, BrowserModule, FormsModule, BrowserAnimationsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  exports: [ MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule ],
})
export class AppModule { }

component.ts 

import { Component, OnInit } from '@angular/core';
import { FormGroup, ValidationErrors, FormBuilder, FormControl, Validators } from '@angular/forms';
import { ProfileCustomValidators } from "./custom-validators/profilecustome.validator";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  staffForm: FormGroup;

    constructor(private fb: FormBuilder){}


    ngOnInit() {

      this.staffForm = this.fb.group({
            fromTime: new FormControl(null, Validators.required),
            toTime: new FormControl(null, Validators.required),
      }, {
        validator: ProfileCustomValidators.validateTime()
      });
    }
}

component.html 

<div>
  <form [formGroup]="staffForm">
       <mat-form-field>
        <input
          type="time"
          required
          formControlName="fromTime"
          matInput

        />
      </mat-form-field>
      <mat-form-field>
        <input
          type="time"
          required
          formControlName="toTime"
          matInput

        />
      </mat-form-field>
      <div *ngIf="staffForm.hasError('toTime')">End time should be greater than start time</div>

  </form>
</div>

Надеюсь, это поможет вам.Пожалуйста, проверьте это рабочее демо на https://stackblitz.com/edit/angular-gsk5xu

...