如果我没有填写 Angular 反应式表格中的所有详细信息，表格会出错

Question

我正在使用反应式表格插入详细联系信息。一些字段是必填的，而另一些是可选的。我遇到的问题是，如果用户未填写可选详细信息字段并单击提交按钮，我会收到以下错误：

ERROR TypeError: "this.contactForm.value.contactLastVerifiedDate is null"

HTML代码：

 ngOnInit() {
    this.contactForm = this.formBuilder.group({
      contactType: ['', Validators.required],
      contactSubType: ['', Validators.required],
      referenceNumber: ['', Validators.required],
      contactStartDate: ['', Validators.required],
      contactLastVerifiedDate: ['']
    });
  }
  onSubmit() {
   if (this.contactForm.valid) {
      const newContact = {
        contactType: this.contactForm.value.contactType,
        contactSubType: this.contactForm.value.contactSubType,
        referenceNumber: this.contactForm.value.referenceNumber,
        startDate: this.parseDate(this.contactForm.value.contactStartDate.toString()),
        lastVerifiedDate: this.parseDate(this.contactForm.value.contactLastVerifiedDate.toString()),
    }

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>Contact Type</label>
    <mat-select
      formControlName="contactType"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && contactFormf.contactType.errors }"
      required
    >
      <mat-option *ngFor="let obj of contactTypes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && contactFormf.contactType.errors" class="invalid-feedback">
      <div *ngIf="submitted && contactFormf.contactType.errors.required">Contact Type is required</div>
    </div>
  </div>
 
  <div class="form-group">
    <label>Contact Sub Type</label>
    <mat-select
      formControlName="contactSubType"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && contactFormf.contactType.errors }"
      required
    >
      <mat-option *ngFor="let obj of contactSubTypes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
    </mat-select>
    <div *ngIf="submitted && contactFormf.contactSubType.errors" class="invalid-feedback">
      <div *ngIf="submitted && contactFormf.contactSubType.errors.required">Name Type is required</div>
    </div>
  </div>
  <div class="form-group">
    <label>Reference Number</label>
    <input
      type="text"
      formControlName="referenceNumber"
      class="form-control"
      [ngClass]="{ 'is-invalid': submitted && contactFormf.referenceNumber.errors }"
      required
    />
    <div *ngIf="submitted && contactFormf.referenceNumber.errors" class="invalid-feedback">
      <div *ngIf="submitted && contactFormf.referenceNumber.errors.required">Reference Number is required</div>
    </div>
  </div>

  <div class="form-group">
    <input
      matInput
      [matDatepicker]="startDate"
      formControlName="contactStartDate"
      placeholder="Choose Start date"
      [ngClass]="{ 'is-invalid': submitted && contactFormf.contactStartDate.errors }"
      required
    />
    <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
    <mat-datepicker #startDate></mat-datepicker>
    <div *ngIf="submitted && contactFormf.contactStartDate.errors" class="invalid-feedback">
      <div *ngIf="submitted && contactFormf.contactStartDate.errors.required">Contact Start Date is required</div>
    </div>
  </div>

  <div class="form-group">
    <input matInput [matDatepicker]="lastVerifiedDate" formControlName="contactLastVerifiedDate" placeholder="Choose Last Verified date" />
    <mat-datepicker-toggle matSuffix [for]="lastVerifiedDate"></mat-datepicker-toggle>
    <mat-datepicker #lastVerifiedDate></mat-datepicker>
  </div>



  <div class="form-group">
    <button>Save</button>
  </div>
</form>

如何让用户在不输入可选的情况下提交表单是可选的Details.Currently如果用户不输入可选的详细信息表单会出错，如果用户输入详细信息则成功提交

Answer 1

你不应该有错误，但你仍然可以通过

之类的东西来防止任何类似的错误

lastVerifiedDate: this
  .parseDate((this.contactForm.value.contactLastVerifiedDate || '').toString()),

Answer 2

您应该在 parseDate 之前检查是否存在有效值...您的函数将是：

 onSubmit() {
   if (this.contactForm.valid) {
      const newContact = {
        contactType: this.contactForm.value.contactType,
        contactSubType: this.contactForm.value.contactSubType,
        referenceNumber: this.contactForm.value.referenceNumber,
        startDate: this.parseDate(this.contactForm.value.contactStartDate.toString()),
    lastVerifiedDate: (this.contactForm.value.contactLastVerifiedDate != '' && this.contactForm.value.contactLastVerifiedDate) ? this.parseDate(this.contactForm.value.contactLastVerifiedDate.toString()) : '',
    }
}

如果我没有填写 Angular 反应式表格中的所有详细信息，表格会出错

Form gives error if I don't fill all the details in Angular reactive forms

javascript

typescript

angular

angular-reactive-forms