在Angular 5“乘法”中，我试图为两个不同的输入字段创建自定义验证，但是我无法访问任何输入值，但遇到了该错误，所以我无法创建创建我的自定义验证的条件
那是我的打字稿文件：
import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { Component, OnInit, Injectable } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl, AbstractControl, ValidationErrors } from '@angular/forms';
import { NgbDateFRParserFormatter } from '../../../models/ngb-date-fr-parser-formatter';
import { Key } from 'protractor';
@Component({
selector: 'app-caf-creation-tabs',
templateUrl: './caf-creation-tabs.component.html',
styleUrls: ['./caf-creation-tabs.component.css'],
providers: [{ provide: NgbDateParserFormatter, useClass: NgbDateFRParserFormatter }]
})
export class CafCreationTabsComponent implements OnInit {
public titleTabs = "Plan";
model: number;
model2: String;
cafPlanForm: FormGroup;
public errorDate: any = { isError: false, errorMessage: '' };
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.createCafCreationForm();
}
createCafCreationForm() {
this.cafPlanForm = this.formBuilder.group({
planName: ['', Validators.required],
planStartDate: ['', Validators.required, this.dateStartValidation],
planEndDate: ['', Validators.required],
planComments: ['', Validators.required]
});
}
limitationDate() {
let parts = this.cafPlanForm.controls['planStartDate'].value
let startDate = new Date();
let endDate = new Date(this.cafPlanForm.controls['planEndDate'].value);
console.log(startDate + " " + endDate);
if (startDate > endDate) {
this.errorDate = {
isError: true,
errorMessage: "Error Date"
}
}
}
//: { [key: string]: boolean } | null
dateStartValidation(control: FormControl) {
if(control.value != undefined){
console.log(control.value);
console.log(this.cafPlanForm.get('planEndDate'));
}
}
}
这是我的html组件：
<div class="row">
<div class="col-12">
<ngb-tabset>
<ngb-tab title="{{ titleTabs }}">
<ng-template ngbTabContent>
<div class="d-flex flex-row justify-content-center mt-5 px-3">
<form class="col-12" [formGroup]="cafPlanForm">
<div class="form-group row form-space">
<label for="planName" class="col-2 col-form-label">Plan Name:</label>
<div class="col-10">
<input type="text" class="form-control rounded-0 border-gray-lighten-2" id="planName" formControlName="planName">
<div class="mt-1 ml-1" *ngIf="cafPlanForm.controls['planName'].invalid && cafPlanForm.controls['planName'].touched">
<small class="text text-danger">Error</small>
</div>
</div>
</div>
<div class="d-flex flex-wrap m">
<div class="form-group flex-row form-space col-6 px-0">
<div class="d-flex flex-row">
<div class="col-4 px-0">
<label for="planStartDate" class="col-form-label">Plan Start Date:</label>
</div>
<div class="input-group col-5 px-0 ml-1">
<div class="d-flex flex-row col-12 px-0">
<input class="form-control rounded-0 border-gray-lighten-2" name="planStartDate" ([ngModel])="model" ngbDatepicker
#d="ngbDatepicker" formControlName="planStartDate">
<div class="input-group-append">
<button class="btn btn-outline-dark rounded-0 border-gray-lighten-1 date-picker-caf" (click)="d.toggle()" type="button">
<i class="material-icons " style="cursor: pointer;">date_range</i>
</button>
</div>
</div>
<div class="ml-2 mt-1 position-relative">
<small class="text text-danger" *ngIf="cafPlanForm.controls['planStartDate'].invalid && cafPlanForm.controls['planStartDate'].touched"> Error</small>
<small class="text text-danger" *ngIf="errorDate.isError == true">Error Date</small>
</div>
</div>
</div>
</div>
<div class="form-group flex-row form-space col-6">
<div class="d-flex flex row justify-content-end">
<div class="col-4">
<label for="planStartDate" class="col-form-label ml-auto">Plan End Date:</label>
</div>
<div class="input-group col-5 px-0">
<div class="d-flex flex-row col-12 px-0">
<input class="form-control rounded-0 border-gray-lighten-2" name="planEndDate" id="planEndDate" [(ngModel)]="model2" ngbDatepicker
#d2="ngbDatepicker" formControlName="planEndDate">
<div class="input-group-append">
<button class="btn btn-outline-dark rounded-0 border-gray-lighten-1 date-picker-caf" (click)="d2.toggle()" type="button">
<i class="material-icons " style="cursor: pointer;">date_range</i>
</button>
</div>
</div>
<div class="ml-2 mt-1 ">
<small class="text text-danger" *ngIf="cafPlanForm.controls['planEndDate'].invalid && cafPlanForm.controls['planEndDate'].touched">Error</small>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row form-space">
<label for="planComments" class="col-2">Plan Comments:</label>
<div class="col-10">
<textarea type="text" class="form-control rounded-0 border-gray-lighten-2" id="planComments" rows="5" formControlName="planComments"></textarea>
<div class="mt-1 ml-1" *ngIf="cafPlanForm.controls['planComments'].invalid && cafPlanForm.controls['planComments'].touched">
<small class="text text-danger">Error</small>
</div>
</div>
</div>
</form>
</div>
</ng-template>
</ngb-tab>
<ngb-tab title="Plan PDF">
<ng-template ngbTabContent>
<div class="d-flex flex-row justify-content-center mt-5">
<form class="col-12">
<div class="form-group row form-space">
<label for="planVersionStartDate" class="col-2 col-form-label">Plan Version Start Date:</label>
<div class="input-group col-3">
<input class="form-control rounded-0 border-gray-lighten-2" name="planVersionStartDate" id="planVersionStartDate" [(ngModel)]="model"
ngbDatepicker #planVersionStartDate="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-dark rounded-0 border-gray-lighten-1 date-picker-caf" (click)="planVersionStartDate.toggle()"
type="button">
<i class="material-icons " style="cursor: pointer;">date_range</i>
</button>
</div>
</div>
<label for="planEndDate" class="col-2 col-form-label ml-auto">Plan Version End Date:</label>
<div class="input-group col-3">
<input class="form-control rounded-0 border-gray-lighten-2" name="planStartDate" id="planStartDate" [(ngModel)]="model2"
ngbDatepicker #d2="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-dark rounded-0 border-gray-lighten-1 date-picker-caf" (click)="d2.toggle()" type="button">
<i class="material-icons " style="cursor: pointer;">date_range</i>
</button>
</div>
</div>
</div>
<hr>
<div class="form-group row form-space mt-4">
<label for="planPDF" class="col-2 col-form-label">Plan PDF:</label>
<div class="col-3">
<div class="custom-file">
<input type="file" class="custom-file-input rounded-0 border-gray-lighten-2" id="inputGroupFile01" hidden>
<label class="custom-file-label" for="inputGroupFile01"></label>
</div>
</div>
</div>
<div class="form-group row form-space">
<label for="planPDFComments" class="col-2 col-form-label">Comments:</label>
<div class="col-10">
<textarea type="text" class="form-control rounded-0 border-gray-lighten-2" id="planComments" rows="5"></textarea>
</div>
</div>
</form>
</div>
</ng-template>
</ngb-tab>
<ngb-tab title="Job Codes">
<ng-template ngbTabContent>
<div class="d-flex flex-row justify-content-center mt-5">
</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
<br>
</div>
</div>
如何解决这个问题？ 我被困了很多小时
答案 0 :(得分：0)
我相信您的问题是，您需要在构造函数中调用它。这是我在网上找到的有关如何使用FormBuilder的示例。 https://coryrylan.com/blog/angular-form-builder-and-validation-management
我以前从未使用过FormBuilder，这是我通常使用Angular Forms的方式。
打字稿：
export class UserInfoComponent {
firstName: FormControl;
lastName: FormControl
myFormGroup: any;
ngOnInit() {
firstName = new FormControl();
lastName = new FormControl();
this.myFormGroup = new FormGroup ({
firstName: this.firstName,
lastName: this.lastName
})
}
}
HTML：
<form [formGroup]="myFormGroup">
<input type="text" formControlName="firstName">
<input type="text" formControlName="lastName">
</form>
您可以使用“ firstName.value”访问任何表单元素 这是它的文档：https://angular.io/api/forms/FormControl
您还可以订阅FormControl和FormGroup的valueChanges。
如果问题是您的自定义验证程序根本无法正常工作，请告诉我，我可以在答案中进行扩展以包括该内容。