【发布时间】：2020-01-20 17:46:47
【问题描述】：
我正在使用 Angular-7 开发一个门户网站。我收到一个错误，我不知道如何解决它：
ERROR TypeError: 无法读取未定义的“已提交”属性
client-quote-landing.component
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../../shared/services/api.service';
import { Router } from '@angular/router';
import { SnotifyService } from 'ng-snotify';
@Component({
selector: 'app-client-quotes-landing',
templateUrl: './client-quotes-landing.component.html',
styleUrls: ['./client-quotes-landing.component.scss']
})
export class ClientQuotesLandingComponent implements OnInit {
formattedAddress = '';
truck_types = [];
public form = {
first_name : null,
last_name : null,
email : null,
phone : null,
address : null,
business_name : null,
truck_required : null,
truck_type : null,
quote_origin : null,
quote_destination : null,
commodity : null,
loading_date : null,
comment : null,
};
public error = {
'first_name' : null,
'last_name' : null,
'email' : null,
'phone' : null,
'address' : null,
'business_name' : null,
'truck_required' : null,
'truck_type' : null,
'quote_origin' : null,
'quote_destination' : null,
'commodity' : null,
'loading_date' : null,
'comment' : null
};
constructor(
private api: ApiService,
private token: TokenService,
private router: Router,
private notify: SnotifyService
) {
}
ngOnInit() {
window.dispatchEvent(new Event('load'));
window.dispatchEvent(new Event('resize'));
}
onSubmit(){
var header = {
'Content-Type': 'application/json'
}
return this.api.post('clientquotelanding', this.form, header).subscribe(
},
);
}
}
另外，我有：
client-quote-landing.html
<form class="form-clientquote" #clientquoteForm=ngForm (ngSubmit)="onSubmit()">
<aw-wizard #wizard [navBarLayout]="'large-empty-symbols'">
<aw-wizard-step [stepTitle]="'Transaction Details'" [navigationSymbol]="{ symbol: '', fontFamily: 'FontAwesome' }">
<div class="centered-content">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="quote_origin" >Origin<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="quote_origin" placeholder="Origin" name="quote_origin" [(ngModel)]="form.quote_origin" #quote_origin="ngModel" [ngClass]="{'is-invalid' : quote_origin.invalid && ((quote_origin.dirty || quote_origin.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="quote_origin.invalid && ((quote_origin.dirty || quote_origin.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="quote_origin.errors?.required"class="alert alert-danger">Origin is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="quote_destination">Destination<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="quote_destination" placeholder="Destination" name="quote_destination" [(ngModel)]="form.quote_destination" #quote_destination="ngModel" [ngClass]="{'is-invalid' : quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="quote_destination.errors?.required"class="alert alert-danger">Destination is required.</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="btn-group">
<button type="button" class="btn btn-primary" awNextStep> Next ></button>
</div>
</div>
</div>
</div>
</div>
</aw-wizard-step>
<aw-wizard-step [stepTitle]="'Personal Details'" [navigationSymbol]="{ symbol: '', fontFamily: 'FontAwesome' }">
<div class="centered-content">
<div class="row">
<div class="col-xs-5">
</div>
<div class="col-xs-3" style="align:center;">
<h3 style="align:center;"><strong> Personal Details</strong></h3>
</div>
<div class="col-xs-4">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<label for="first_name">First Name<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="first_name" placeholder="First Name" name="first_name" [(ngModel)]="form.first_name" #first_name="ngModel" [ngClass]="{'is-invalid' : first_name.invalid && ((first_name.dirty || first_name.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="first_name.invalid && ((first_name.dirty || first_name.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="first_name.errors?.required" class="alert alert-danger">First Name is required.</div>
</div>
</div>
<div class="col-xs-6">
<label for="last_name">Last Name<span style="color:red;"> *</span></label>
<input type="text" class="form-control" id="last_name" placeholder="Last Name" name="last_name" [(ngModel)]="form.last_name" #last_name="ngModel" [ngClass]="{'is-invalid' : last_name.invalid && ((last_name.dirty || last_name.touched) || quoteform.submitted)}" required>
<div class="form-feedback" *ngIf="last_name.invalid && ((last_name.dirty || last_name.touched) || quoteform.submitted)" class="invalid-feedback">
<div style="color:red;" *ngIf="last_name.errors?.required"class="alert alert-danger">Last Name is required.</div>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12">
<div class="btn-group">
<button style="margin:5px" type="button" class="btn btn-warning" awPreviousStep>< Previous</button>
<button style="margin:5px" type="submit" class="btn btn-success" > Get A Quote</button>
</div>
</div>
</div>
</div>
</div>
</aw-wizard-step>
</aw-wizard>
</form>
当我为应用程序提供服务时，我在控制台上收到此错误：
然后，当我点击错误的第 29 行时，我发现：
另外，第 48 行给了我这个：
如何解决此错误？
【问题讨论】：
-
嗨，欢迎来到 Stackoverflow！发布代码块时，您可以使用 3x 反引号（即 ``` {my code} ```）来缩进它们。这允许您直接复制和粘贴代码块，而无需在每行之前手动键入 4 个空格 =)