在自定义验证程序中访问表单组

Question

我正在尝试将自定义验证器添加到我的组件中。

自定义验证器文件：

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

组件.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})
}

组件.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

我需要一些帮助来解决这个问题，以及如何在custom.validator文件中访问staffForm，因为它返回null。谢谢。

Answer 1

这是更新的工作代码

Customvalidator File： 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;
        };
    }
}

模块.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 { }

组件.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()
      });
    }
}

组件.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