Error: Unexpected closing tag

Ionic Framework ionic-v3
#1

Hello! I am getting the error “unexpected closing tag ion-datetime”. For my understand everything was opened and closed correctly. I cannot see the problem.

Error: Template parse errors:
Unexpected closing tag “ion-datetime”. It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags ("Date
{{Alert}} [ERROR ->]

<ion-header>

  <ion-navbar>
    <ion-title>Add Note</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
  <form [formGroup]="formGroup" (ngSubmit)="saveNote(formGroup.value)">
    <ion-item>
        <ion-label>Date</ion-label>
        <ion-datetime displayFormat=“MM/DD/YYYY“ formControlName="date"></ion-datetime>
    </ion-item>
    <ion-item>
      <ion-label>Title</ion-label>
      <ion-input type="text" name="title" formControlName="title" required></ion-input>
      <div class="alert" *ngIf="!formGroup.controls['title'].valid && formGroup.controls['title'].touched">{{ titleAlert }}</div>
    </ion-item>
    <ion-item>
        <ion-label>Note</ion-label>
        <ion-input type="text" name="content" formControlName="content" required></ion-input>
        <div class="alert" *ngIf="!formGroup.controls['content'].valid && formGroup.controls['content'].touched">{{ contentAlert }}</div>
    </ion-item>
    <button ion-button type="submit" [disabled]="!formGroup.valid">Save Note</button>
  </form>
</ion-content>

Thank you for your help!

#2

The code you posted is not consistent with the error you posted. Which template contains {{Alert}} ?

#3

Don’t access controls directly like this. Always use get() instead, or your code will break in production.

#4

Thank you for the fast reply! It works now.

#5

I changed the code a little bit and now nothing works anymore. I always get the error message,
Error: Template parse errors:
Parser Error: Unexpected token Lexer Error: Unexpected character [“] at column 1 in expression [“saveNote(f.value)“] at column 2 in [“saveNote(f.value)“] in ng:///AppModule/AddNotePage.html@11:8 ("

](ngSubmit)=“saveNote(f.value)“ #f="ngForm"> Date "): ng:///AppModule/AddNotePage.html@11:8 
<ion-header>

  <ion-navbar>
    <ion-title>Add Note</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <form (ngSubmit)=“saveNote(f.value)“ #f="ngForm">
   <ion-item>
     <ion-label>Date</ion-label>
     <ion-datetime displayFormat="MM/DD/YYYY" name="date" ></ion-datetime>
   </ion-item>
    <ion-item>
      <ion-label>Title</ion-label>
      <ion-input type="text" name="title" required></ion-input>
    </ion-item>
    <ion-item>
        <ion-label>Note</ion-label>
        <ion-input type="text" name="content" formControlName="content" required></ion-input>
    </ion-item>
    <button ion-button type="submit" [disabled]="!f.valid">Save Note</button>  
  </form>
</ion-content>

What am I doing wrong? Thank you for the help!

#6

Hello LeonGer, i too just started with Ionic 3. And fortunately, it seems we are both using the same tutorial video from youtube. I faced a similar problem at this point too but after randomly looking through i was able to fix my errors. I will attach my working code so you can have a look at it and compare with yours. Good luck!

<ion-header>

  <ion-navbar>
    <ion-title>Add Note</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
	<form [formGroup]="formGroup" (ngSubmit)="saveNote(formGroup.value)">
		<ion-item>
			<ion-label>Date</ion-label>
			<ion-datetime displayFormat="DD/MM/YYYY" formControlName="date"></ion-datetime>
		</ion-item>

		<ion-item>
			<ion-label>Title</ion-label>
			<ion-input type="text" name="title" formControlName="title" required></ion-input>
			<div class="alert" *ngIf="!formGroup.controls['title'].valid && formGroup.controls['title'].touched">
				{{ titleAlert }}
			</div>	
		</ion-item>

		<ion-item>
			<ion-label>Note</ion-label>
			<ion-input type="text" name="content" formControlName="content" required></ion-input>
			<div class="alert" *ngIf="!formGroup.controls['content'].valid && formGroup.controls['content'].touched">
				{{ contentAlert }}
			</div>	
		</ion-item>

		<button ion-button type="submit" [disabled]=!formGroup.valid>Save Note</button>
	</form>
</ion-content>
#7

Ah thank you very much! My program works now also.

#8