角度-错误TypeError：无法读取未提交的属性“已提交”

时间：2019-09-19 16:25:28

标签： angular laravel

我正在使用Angular-7开发一个Web门户。我遇到错误，不知道如何解决：

  

错误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: '&#xf085;', 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: '&#xf0b1;', 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>

在为应用程序提供服务时，我在控制台上收到此错误：

main error

然后，当我在错误的第29行上单击时，我发现了这一点：

line 29

第48行也给了我这个

line 48

如何解决此错误？

1 个答案:

答案 0 :(得分：0)

ngForm传递给模板引用变量#clientquoteForm=ngForm

但是您的表单正在检查quoteForm.submitted。您一定已经重命名了变量，但没有重命名其余用法。

ngForm也应该用引号封装：

#clientquoteForm="ngForm"。

这应该有效：

<form class="form-clientquote" #clientquoteForm="ngForm" (ngSubmit)="onSubmit()">
  <aw-wizard #wizard [navBarLayout]="'large-empty-symbols'">
    <aw-wizard-step [stepTitle]="'Transaction Details'"
      [navigationSymbol]="{ symbol: '&#xf085;', 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) || clientquoteForm.submitted)}"
                required>
              <div class="form-feedback"
                *ngIf="quote_origin.invalid && ((quote_origin.dirty || quote_origin.touched) || clientquoteForm.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) || clientquoteForm.submitted)}"
                required>
              <div class="form-feedback"
                *ngIf="quote_destination.invalid && ((quote_destination.dirty || quote_destination.touched) || clientquoteForm.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: '&#xf0b1;', 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) || clientquoteForm.submitted)}"
                required>
              <div class="form-feedback"
                *ngIf="first_name.invalid && ((first_name.dirty || first_name.touched) || clientquoteForm.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) || clientquoteForm.submitted)}"
                required>
              <div class="form-feedback"
                *ngIf="last_name.invalid && ((last_name.dirty || last_name.touched) || clientquoteForm.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>
相关问题
最新问题