Question

运行Ionic 2 HTML代码时出现这些错误：模板解析错误：意外结束标记“表单”“提交[错误 - ＆gt;] 意外的结束标记“ion-content”“主页＆lt; / button＆gt; - ＆gt; [ERROR - ＆gt;]”

这是我的HTML代码：

<ion-content>
    <ion-title (click)="showAlert()">
        Sign Up
    </ion-title>
    <form #userForm = "ngForm" (ngSubmit)="onSubmit(userForm.value)">
        <div>
          <ion-label color="primary">Enter Username</ion-label>
          <ion-input type="text" required #usernameRef="ngModel"  class="form-control" placeholder="Username" ngModel></ion-input>
          <div [hidden]=" usernameRef.valid || usernameRef.pristine ">
           Please enter username
          </div>
        </div>
        <div>
          <ion-label color="primary">Enter Password</ion-label>
          <ion-input type="text" required #passRef="ngModel"  class="form-control" placeholder="Password" ngModel></ion-input>
          <div [hidden]=" passRef.valid || passRef.pristine ">
           Please enter password
          </div>
        </div>
        <div>
           <ion-label color="primary">Re-enter Password</ion-label>
          <ion-input type="text" required #repassRef="ngModel"  class="form-control" placeholder="Re-enter Password" ngModel></ion-input>
          <div [hidden]=" repassRef.valid || repassRef.pristine ">
           Please re-enter password
          </div>
        </div>
        <div>
           <ion-label color="primary">Enter Email Address</ion-label>
          <ion-input type="text" required #emailRef="ngModel"  class="form-control" placeholder="example@email.com" ngModel></ion-input>
          <div [hidden]=" emailRef.valid || emailRef.pristine ">
           Please enter email
          </div>
        </div>
        <div>
           <ion-label color="primary">Enter Phone Number</ion-label>
          <ion-input type="text" required #numRef="ngModel"  class="form-control" placeholder="+91-7022-51-074" ngModel></ion-input>
          <div [hidden]=" numRef.valid || numRef.pristine ">
           Please enter phone number
          </div>
        </div>
           <ion-label color="primary">Enter Country</ion-label>
          <ion-input type="text" required #conRef="ngModel"  class="form-control" placeholder="United States" ngModel></ion-input>
          <div [hidden]=" conRef.valid || conRef.pristine ">
           Please enter country
          </div>
        <div>
        <button type="submit">Submit</button>
    </form>
     <button ion-button (click)="goBack()">Home Page</button> 
</ion-content>

为什么我会收到该错误？我该如何解决？

Answer 1

享受！你忘了一个div标签并为一个结束div添加一个div

<ion-content>
    <ion-title (click)="showAlert()">
        Sign Up
    </ion-title>
    <form #userForm = "ngForm" (ngSubmit)="onSubmit(userForm.value)">
        <div>
          <ion-label color="primary">Enter Username</ion-label>
          <ion-input type="text" required #usernameRef="ngModel"  class="form-control" placeholder="Username" ngModel></ion-input>
          <div [hidden]=" usernameRef.valid || usernameRef.pristine ">
           Please enter username
          </div>
        </div>
        <div>
          <ion-label color="primary">Enter Password</ion-label>
          <ion-input type="text" required #passRef="ngModel"  class="form-control" placeholder="Password" ngModel></ion-input>
          <div [hidden]=" passRef.valid || passRef.pristine ">
           Please enter password
          </div>
        </div>
        <div>
           <ion-label color="primary">Re-enter Password</ion-label>
          <ion-input type="text" required #repassRef="ngModel"  class="form-control" placeholder="Re-enter Password" ngModel></ion-input>
          <div [hidden]=" repassRef.valid || repassRef.pristine ">
           Please re-enter password
          </div>
        </div>
        <div>
           <ion-label color="primary">Enter Email Address</ion-label>
          <ion-input type="text" required #emailRef="ngModel"  class="form-control" placeholder="example@email.com" ngModel></ion-input>
          <div [hidden]=" emailRef.valid || emailRef.pristine ">
           Please enter email
          </div>
        </div>
        <div>
           <ion-label color="primary">Enter Phone Number</ion-label>
          <ion-input type="text" required #numRef="ngModel"  class="form-control" placeholder="+91-7022-51-074" ngModel></ion-input>
          <div [hidden]=" numRef.valid || numRef.pristine ">
           Please enter phone number
          </div>
        </div>
        <div>
           <ion-label color="primary">Enter Country</ion-label>
          <ion-input type="text" required #conRef="ngModel"  class="form-control" placeholder="United States" ngModel></ion-input>
          <div [hidden]=" conRef.valid || conRef.pristine ">
           Please enter country
          </div>
        </div>
        <button type="submit">Submit</button>
    </form>
     <button ion-button (click)="goBack()">Home Page</button> 
</ion-content>

Answer 2

好像你错过了一个div的开场白。试试这个：

<div>
   <ion-label color="primary">Enter Country</ion-label>
   <ion-input type="text" required #conRef="ngModel"  class="form-control" placeholder="United States" ngModel></ion-input>
   <div [hidden]=" conRef.valid || conRef.pristine ">
        Please enter country
    </div>
 <div>

HTML代码中的模板分析错误

2 个答案: