Question

我正在尝试向我的component.ts添加自定义验证器

customvalidatorFile：

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.ts

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

Component.html

Cannot read property 'get' of null

通过使用上面的代码，我得到以下错误

Sub MsgB()

    Dim x As Long
    Dim passes As String, fails As String

    With Sheet2

        For x = 2 To 8
            If .Range("B" & x).Value < 0.24 Then
                passes = passes & ", " & .Range("A" & x)
            Else
                fails = fails & ", " & .Range("A" & x)
            End If
        Next x

    End With    

    MsgBox "Pass: " & Mid(passes, 3) & vbLf & "Fail: " & Mid(fails, 3)

End Sub

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

Answer 1

这是更新的工作代码

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

上查看此工作演示

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

1 个答案: