Question

我知道这可能是一个重复的问题，但是通过阅读其他解决方案，我无法弄清我的问题。因此，如果有人能指出我的错误，我将不胜感激。 HTML代码：

<div class="jumbotron">
<div class="container">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <form [formGroup]="contactForm" >
        <div class="form-group">
          <label>Contact Id</label>
          <input type="text"
           formControlName="contactId"
           [(ngModel)]="contactId"
           class="form-control" />
          <!-- <div *ngIf="submitted && contactFormf.contactId.errors" class="invalid-feedback">
                <div *ngIf="contactFormf.contactId.errors.required">Contact Id is required</div>
              </div> -->
        </div>
        <div class="form-group">
          <label>Agreement Id</label>
          <input
            type="text"
            formControlName="agreementId"
            [(ngModel)]="agreementId"
            class="form-control"
            [ngClass]="{ 'is-invalid': submitted && contactFormf.agreementId.errors }"
          />
          <div *ngIf="submitted && contactFormf.agreementId.errors" class="invalid-feedback">
            <div *ngIf="contactFormf.agreementId.errors.required">Agreement Id is required</div>
          </div>
        </div>
        <div class="form-group">
          <label>Contact Type</label>
          <mat-select
          formControlName="contactType"
          [(ngModel)]="contactType"
          class="form-control">
          <mat-option *ngFor="let obj of contactTypes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
          </mat-select>
        </div>
        <div class="form-group">
          <label>Contact Type Description</label>
          <input type="text"
          formControlName="contactTypeDescription"
          [(ngModel)]="contactTypeDescription"
          class="form-control" />
        </div>
        <div class="form-group">
          <label>Contact Sub Type</label>
          <mat-select
          formControlName="contactSubType"
          [(ngModel)]="contactSubType"
          class="form-control">
          <mat-option *ngFor="let obj of contactTypes" [value]="obj.value"> {{ obj.viewValue }}</mat-option>
          </mat-select>
        </div>
        <div class="form-group">
          <label>Contact Sub Type Description</label>
          <input type="text"
          formControlName="contactSubTypeDescription"
          [(ngModel)]="contactSubTypeDescription"
          class="form-control" />
        </div>
        <div class="form-group">
          <label>Reference Number</label>
          <input type="text"
          formControlName="referenceNumber"
          [(ngModel)]="referenceNumber"
          class="form-control" />
        </div>
        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactLastVerifiedDatepicker"
            formControlName="contactlastVerifiedDate"
            [(ngModel)]="contactlastVerifiedDate"
            placeholder="Choose Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactLastVerifiedDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #complaintStartDatepicker></mat-datepicker>
        </div>

        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactStartDatepicker"
            formControlName="contactStartDate"
            [(ngModel)]="contactStartDate"
            placeholder="Choose Contact Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactStartDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactStartDate></mat-datepicker>
        </div>
        <div class="form-group">
          <input
            matInput
            [min]="minDate"
            [max]="maxDate"
            [matDatepicker]="contactEndDatepicker"
            formControlName="contactEndDate"
            [(ngModel)]="contactEndDate"
            placeholder="Choose Contact Start date"
          />
          <mat-datepicker-toggle matSuffix [for]="contactEndDatepicker"></mat-datepicker-toggle>
          <mat-datepicker #contactStartDate></mat-datepicker>
        </div>
      </form>
    </div>
  </div>
</div>

打字稿代码：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-contactform',
templateUrl: './contactform.component.html',
styleUrls: ['./contactform.component.scss']
})
export class ContactformComponent implements OnInit {
contactForm: FormGroup;
contactId = '';
agreementId = '';
contactType = '';
contactTypeDescription = '';
contactSubType = '';
contactSubTypeDescription = '';
referenceNumber = '';
contactlastVerifiedDate = '';
contactStartDate = '';
contactEndDate = '';
contactTypes: any[] = [{ value: '', viewValue: '' }, { value: '', 
viewValue: '' }, { value: '', viewValue: '' }];
contactSubTypes: any[] = [{ value: '', viewValue: '' }, { value: '', 
viewValue: '' }, { value: '', viewValue: '' }];
constructor(private formBuilder: FormBuilder) {}
@Output()
savedContact: EventEmitter<any> = new EventEmitter<any>();
ngOnInit() {
this.contactForm = this.formBuilder.group({
  contactId: ['', Validators.required],
  agreementId: ['', Validators.required],
  contactType: ['', Validators.required],
  contactTypeDescription: [''],
  contactSubType: ['', Validators.required],
  contactSubTypeDescription: [''],
  referenceNumber: [''],
  contactlastVerifiedDate: ['', Validators.required],
  contactStartDate: ['', Validators.required],
  contactEndDate: ['']
 });
 }
 get contactFormf() {
 return this.contactForm.controls;
 }

 onSubmitcontactForm() {
// Stop here if Agent Relationship Form is invalid
if (this.contactForm.invalid) {
  return;
}
alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.contactForm.value));
}
saveContact() {
var savedContact = {
  contactId: this.contactId,
  agreementId: this.agreementId,
  contactType: this.contactType,
  contactDescription: this.contactTypeDescription,
  contactSubType: this.contactSubType,
  contactSubTypeDescription: this.contactSubTypeDescription,
  referenceNumber: this.referenceNumber,
  lastVerifiedDate: this.contactlastVerifiedDate,
  startDate: this.contactStartDate,
  endDate: this.contactEndDate
  };
  this.savedContact.emit(savedContact);
  }
  }
  class Contact {
  contactId?: number;
  agreementId?: string[];
  contactType?: string;
  contactDescription?: string;
  endDate?: string;
  lastVerifiedDate?: string;
  referenceNumber?: string;
  startDate?: string;
  contactSubType?: string;
  contactSubTypeDescription?: string;
  }

通过阅读其他答案，我了解到我的ngModel声明和打字稿中的变量不匹配或类似问题。但是我不完全确定哪里出了问题。我为其他组件做了类似的事情，它们似乎工作正常。

Answer 1

这里正在进行堆栈炸弹example，

您的contactStartDatepicker和contactEndDatepicker定义错误，我如下编辑，

<mat-form-field>
  <input matInput [matDatepicker]="startDate" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
  <mat-datepicker #startDate></mat-datepicker>
</mat-form-field>

<mat-form-field>
  <input matInput [matDatepicker]="endDate" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
  <mat-datepicker #endDate></mat-datepicker>
</mat-form-field>

Answer 2

您的{{m|gem-pro|*karzijan?||(to turn)}},{{m|ine-pro|*gers-||(to bend, turn)}}引用变量mat-datepicker属性和mat-datepicker-toggle [for]属性不匹配

如下更改

[matDatepicker]

错误：未捕获（承诺）：错误：无法分配给引用或变量

2 个答案: