“FormComponent”类型上不存在属性“名称”

Question

这是错误消息：

在 160:282 出现无效背景值警告。忽略。

184:60084 处的背景值无效。忽略。

src/app/form/form.component.html(14,48) 中的错误：：“FormComponent”类型上不存在属性“名称”。

src/app/form/form.component.html(27,69): : 类型“FormComponent”上不存在属性“homePhone”。

src/app/form/form.component.html(32,67): : 类型“FormComponent”上不存在属性“cellPhone”。

src/app/form/form.component.html(37,71): : 类型“FormComponent”上不存在属性“officePhone”。

src/app/form/form.component.html(168,21): : 类型“FormComponent”上不存在属性“homePhone”。

src/app/form/form.component.html(169,21): : 类型“FormComponent”上不存在属性“cellPhone”。

src/app/form/form.component.html(170,21): : 类型“FormComponent”上不存在属性“officePhone”。

src/app/form/form.component.html(189,11): : 类型“FormComponent”上不存在属性“NaN”。

src/app/form/form.component.html(14,48): : 类型“FormComponent”上不存在属性“名称”。

src/app/form/form.component.html(27,69): : 类型“FormComponent”上不存在属性“homePhone”。

src/app/form/form.component.html(32,67): : 类型“FormComponent”上不存在属性“cellPhone”。

src/app/form/form.component.html(37,71): : 类型“FormComponent”上不存在属性“officePhone”。

这是我的form.component.html

  <div [hidden]="submitted" >
    <form #calculatingForm="ngForm" (ngSubmit)="onSubmit(calculatingForm)" class="ui big form">

        <h2 class="ui dividing header">ProShine Quote Calculator</h2>
        <div class="spacer30"></div>


        <div class="ui grid">
          <div class="row">
            <div class="eight wide column">
              <div class="required field">
                <label for="name">Client Name</label>
                <input type="text" name="name" [(ngModel)]="name" #client="ngModel" required autofocus>

                <div [hidden]="client.valid || client.pristine" class="ui negative message">
                  <div class="header">
                    No Client Name Entered
                  </div>
                  <p>Please Enter A Name
                  </p>
                </div>
              </div>

              <div class="field">
                <label for="homePhone">Home Phone</label>
                  <input type="tel" name="homePhone" id="homePhone" [(ngModel)]="homePhone" placeholder="(123) 456-7890"
       [textMask]="{mask: mask}">
              </div>
              <div class="field">
                <label for="cellPhone">Cell Phone</label>
                <input type="tel" name="cellPhone" id="cellPhone" [(ngModel)]="cellPhone" placeholder="(123) 456-7890"
       [textMask]="{mask: mask}">
              </div>
              <div class="field">
                <label for="officePhone">Office Phone</label>
                <input type="tel" name="officePhone" id="officePhone" [(ngModel)]="officePhone" placeholder="(123) 456-7890"
       [textMask]="{mask: mask}">
              </div>
            </div>

       
        
            <div class="eight wide column">
              <div class="required field">
                <label for="totalPanes">Total Number of Panes</label>
                <input type="number" name="totalPanes" id="totalPanes" [(ngModel)]="totalPanes" #panes="ngModel" required>

                <div [hidden]="panes.valid || panes.pristine" class="ui negative message">
                  <div class="header">
                    You Didn't Enter A Number
                  </div>
                  <p>Please Enter the Number of Panes
                  </p>
                </div>
              </div>

              <div class="field">
                <label for="floorPanes">Number of Floor Panes</label>
                <input type="number" name="floorPanes" id="floorPanes" [(ngModel)]="floorPanes">
              </div>

              <div class="field">
                <label for="outsideLadderPanes">Number of Outside Ladder Panes</label>
                <input type="number" name="outsideLadderPanes" id="outsideLadderPanes" [(ngModel)]="outsideLadderPanes">
              </div>

              <div class="field">
                <label for="ladderPanesInAndOut">Number of Indoor AND Outdoor Ladder Panes</label>
                <input type="number" name="ladderPanesInAndOut" id="ladderPanesInAndOut" [(ngModel)]="ladderPanesInAndOut">
              </div>
              
            </div>
            </div> <!--End of row-->

            <div class="spacer30"></div>
            <div class="three column row">
              <div class="four wide column"></div>
              <div class="eight wide column">
                <div class="required field">
                  <label for="currentUser">Created By</label>
                  <select name="currentUser" id="currentUser" class="ui fluid dropdown " [(ngModel)]="currentUser" required>
                    <option value="">-- Select --</option>
                    <option value="Jason Walle">Jason Walle</option>
                    <option value="Aubree Walle">Aubree Walle</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="column">
                <h2 class="ui dividing header">Additional Options</h2>
                <!-- <div class="spacer30"></div> -->
              </div>
            </div>
            <div class="row">
              <div class="eight wide column">
                <div class="field">
                  <label for="referral">Referral By</label>
                  <input type="text" name="referral" id="referral" [(ngModel)]="referral" >
                </div>
               
              </div>

              <div class="three wide column">
                
                  <div class="field">
                    <label for="clientDiscount">Discount</label>
                    <input type="text" name="clientDiscount" id="clientDiscount" [(ngModel)]="clientDiscount" >
                  </div>
              </div> 
            </div>
            <div class="row">
              <div class="eight wide column"></div>
              <div class="three wide column">
                <div class="field">
                    <label for="discountType">Discount Type</label>
                    <select name="discountType" id="discountType" class="ui fluid dropdown " [(ngModel)]="discountType" required>
                    <option value="">-- Select --</option>
                    <option value="Percentage">Percentage(%)</option>
                    <option value="Dollars">Dollars($)</option>
                  </select>
                  </div>
              </div>
            </div>
            

          </div>
        


     


      <div class="spacer50"></div>
      <button type="submit" class="ui blue button">Calculate</button>
      <button type="button" class="ui olive button" (click)="calculatingForm.reset()">New Client</button>
      <div class="spacer75"></div>
    </form>
  </div>
  

  <div [hidden]="!submitted" class="results-div">
    <button (click)="goBack()" class="ui blue button"> <i class="arrow alternate circle left outline icon"></i> Go Back</button>

    <!-- ============ PDF Generating Section ============= -->
    <div id="content"> 
      <div class="ui grid">
        <div class="three column row">
          <div class="column"></div>
          <div class="column">
            <img src="./../../assets/proshine-card.jpg" alt="" class="proshine-logo">
          </div>
          <div class="column"></div>
        </div>
      </div>

      <div class="spacer50"></div>
      <div class="ui grid">
        <div class="row">
          <div class="twelve wide column">
            <br>
            <h2 class="">Client Name: <span style="margin-left: 50px;font-size: larger">{{ clientName }}</span></h2>
            <div class="spacer30"></div>
          </div>
          <div class="eight wide column">
                <h3>Home Phone #: {{homePhone}} </h3>
                <h3>Cell Phone #: {{cellPhone}} </h3>
                <h3>Office Phone #: {{officePhone}} </h3>
          </div>
        </div>
      </div>
      <hr>
      
      <div class="spacer30"></div>

      <div class="ui grid">
        <div class="row">
          <div class="eight wide column">
            <h3># of Floor Panes: <h2>{{floorPanes}}</h2> </h3>
            <h3># of OUTSIDE Ladder Panes: <h2>{{outsideLadderPanes}}</h2> </h3>
            <h3># of Inside AND Outside Ladder Panes: <h2>{{ladderPanesInAndOut}}</h2> </h3>
          </div>
        </div>
      </div>
      <hr>
      <!-- <h3>Original Quote: ${{clientDiscount - }} </h3> -->
      <h3 *ngIf="clientDiscount!= NaN">Client Discount: <span style="color:firebrick">- ${{discountPrice}}  </span> </h3>
      <h1>Total Quote: <span class="quotePrice" >${{estimatedQuote}}</span> </h1>

      <div class="spacer50"></div>
      <h3>Created By {{currentUser}} on {{currentDate | date:'fullDate'}} </h3>
    </div>

  <div class="spacer50"></div>
  <button class="ui orange button" (click)="downloadPDF()">Export As PDF</button>
  <div class="spacer75"></div>
   
  </div>

这是我的 form.component.ts 文件

import { NavigationComponent } from './../navigation/navigation.component';
import { Estimate } from './../estimate';
import { NgForm, FormsModule } from "@angular/forms";
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})



export class FormComponent implements OnInit {


  constructor(
  ) { }

  // =========== Text Mask ==============
  mask: any[] = ['+','1',' ', '(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
  

// =========== Variables ===========
submitted = false;
// isOn = false;

costPerPane = 0.00;
costForLadder = 0.00;
costForFloorPanes = 0.00;
estimatedQuote = 0.00;
// quoteDemo = new Estimate("Phil",12,12,0,0,0);

clientName:string = "";
clientHomePhone:string;
clientCellPhone:string;
clientOfficePhone:string;
currentUser:string;
currentDate:string;
referral:string;


totalPanes:number;
floorPanes:number;
outsideLadderPanes:number;
ladderPanesInAndOut:number;
clientDiscount:number;
discountType:string;
discountPrice:any;





onSubmit(calculatingForm :NgForm){


  this.submitted = true;
  
  //Getting Form Input Values
  this.clientName = calculatingForm.form.get('name').value;
  this.clientHomePhone = calculatingForm.form.get('homePhone').value;
  this.clientCellPhone = calculatingForm.form.get('cellPhone').value;
  this.clientOfficePhone = calculatingForm.form.get('officePhone').value;


  this.totalPanes = calculatingForm.form.get('totalPanes').value;
  this.floorPanes = calculatingForm.form.get('floorPanes').value;
  this.outsideLadderPanes = calculatingForm.form.get('outsideLadderPanes').value;
  this.ladderPanesInAndOut = calculatingForm.form.get('ladderPanesInAndOut').value;

  this.clientDiscount = calculatingForm.form.get('clientDiscount').value;
  this.discountType = calculatingForm.form.get('discountType').value;

  this.currentUser = calculatingForm.form.get('currentUser').value;
  this.currentDate = Date.now().toString();



//  ============ TOTAL QUOTE ==========
  this.estimatedQuote = (this.costForFloorPanes + this.costForLadder);

  

  //------ Discount Amount ----------
  if (this.discountType == "Percentage") {
    this.clientDiscount /= 100;
    this.discountPrice = (this.estimatedQuote * this.clientDiscount);
    this.estimatedQuote -= (Math.round(this.discountPrice));
    this.discountPrice = (Math.round(this.discountPrice)).toString();
    // this.estimatedQuote = (Math.ceil(this.estimatedQuote));

    
  }else if(this.discountType == "Dollars"){
    this.discountPrice = this.clientDiscount.toString();
    this.estimatedQuote -= this.clientDiscount;

    
  }else{
    this.estimatedQuote = this.estimatedQuote;
  }

  

}//End of onSubmit

  public goBack(){
    this.estimatedQuote = 0.00;

    this.submitted = false;
  }
  public downloadPDF(){
    return xepOnline.Formatter.Format('content', {render: 'download'});
  }

  ngOnInit() {

  }



}

错误似乎在 HTML 中：

[(ngModel)]="stufffffffs"

Answer 1

你使用了错误的ngModel绑定，你在component中使用的variables没有在form中使用

在你服用的成分中，

clientName:string = "";clientHomePhone:string;clientCellPhone:string;

但以你采取的形式，

Name:string = "";HomePhone:string;CellPhone:string;

你忘了在前面加上client

例如;

<input type="text" name="name" [(ngModel)]="name" #client="ngModel" required autofocus>

应该是，

<input type="text" name="name" [(ngModel)]="clientName" #client="ngModel" required autofocus>

所以，replace 所有的出现都相同。

Answer 2

使用与组件中定义的ngModel 相同的变量。它基本上意味着组件中有一个属性，它指的是。但是由于组件中没有"homePhone"这样的变量，所以报错了。

[(ngModel)]="clientHomePhone" 而不是 [(ngModel)]="homePhone"

<input type="tel" name="homePhone" id="homePhone" [(ngModel)]="clientHomePhone" placeholder="(123) 456-7890" [textMask]="{mask: mask}">

同样，对于即将出现错误的所有其他输入。

阅读 this 了解 ngModel 的工作原理。