时间戳

首页 > 解决方案 > 角度形式：无法读取未定义的属性“cafPlanForm”

angular - 角度形式：无法读取未定义的属性“cafPlanForm”

问题描述

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

我怎么能解决这个问题？我被困了好几个小时

标签： angularangular5ng-bootstrapangular-forms

解决方案

我相信您的问题是，您需要在构造函数中调用它。这是我在网上找到的关于如何使用 FormBuilder 的示例。https://coryrylan.com/blog/angular-form-b​​uilder-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。

如果问题是您的自定义验证器根本不起作用，请告诉我，我可以扩展我的答案以包含它。

推荐阅读