При создании формы я получаю постоянную ошибку Angular 4 parse error

Question

Ошибка не исчезает даже после удаления большей части html.Я использую Angular 4 для создания формы.Я не могу понять ошибку или проблему, которая ее вызывает.

Необходимые файлы прилагаются ниже.

HTML-файл:

<b>{{todaydate | date:'shortTime'}}</b>
<p id="dir">{{owner| json}}</p>
  <h1>
    Angular 4 {{title| uppercase}}!
  </h1>



    <form [formGroup]="formdata" (ngSubmit)="onClick(formdata.value)">
        <input type="text" name="name" placemame="Name" formControlName="name"><br>
        <input type="text" name="email" placeholder="Email" formControlName="emailid"><br>
        <input type="password" name="password" placeholder ="Passkey" formControlName="password"><br>
        <input type="submit" value="Login">
      </form>
      <br>

      <p>
        Email:{{formadata.emailid}}
        Name:{{formdata.name}}
      </p>

<br/>

<br/>
<br/>
  <p>{{ms.sp}}</p>
    <ul>
      <li><a routerLink="list">list</a></li>
      <li><a routerLink="list2">list2</a></li>
    </ul>

<br/>
<router-outlet></router-outlet>
<button (click)="myClick()">Get Data</button>
<table>
<tr>
  <!--td>ID</td-->
  <td>Name</td>
  <!--td>Username</td-->
  <td>Email</td>
  <!--td>Phone</td>
  <td>City</td-->
</tr>
<tr *ngFor="let i of httpdata">
  <!--td>{{i.id}}</td-->
  <td>{{i.name}}</td>
  <!--td>{{i.username}}</td-->
  <td>{{i.email}}</td>
  <!--td>{{i.phone}}</td>
  <td>{{i.address.city}}</td-->
  </tr> 
  <!--tr *ngFor="let i of formdata">
    <td>{{i.name}}</td>
    <td>{{i.emailid}}</td>
  </tr--> 
</table>`

app.component.ts: Это файл компонента.

import { Component } from '@angular/core';
import { MyserviceService } from './myservice.service';
import { HttpClient } from '@angular/common/http';
import { FormGroup, FormControl, Validators } from '@angular/forms';

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

export class AppComponent {


  id:string;
  name:string;
  username:string;
  title = 'testang';
  todaydate= new Date();
  cs;
  httpdata;
  formdata;
  emailid;
  password;

  owner={name:'Corvus', age:'22', address:'I change VPN'};
  months = ["January", "Feburary", "March", "April", "May", 
  "June", "July", "August", "September",
  "October", "November", "December"];

  constructor(private http: HttpClient,private ms:MyserviceService){}
  myClick()
  { 
    this.ms.sp="This is cool!";
    this.http.get('http://jsonplaceholder.typicode.com/users').
    subscribe((data)=> this.displaydata(data));         
  }
  displaydata(data)
  {
    this.httpdata=data;
  }  

  ngOnInit(){
      this.formdata=new FormGroup({
          name: new FormControl("Johnny"),
          emailid: new FormControl("",Validators.required),
          password: new FormControl("",Validators.required)
      });
  }
  onClick(data)
    {
      this.formdata=data.emailid;
      this.formdata=data.name;    }
}

Консоль: в браузере Chrome он показывает синтаксическую ошибку в </form>, но даже после удаления всей части формы в html все равно я получаю ту же ошибку.

compiler.js:2547 Uncaught Error: Template parse errors:
Unexpected closing tag "form". 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 ("
  list works

  [ERROR ->]</form>
</p>
</div>
"): ng:///AppModule/ListComponent.html@3:2
    at syntaxError (compiler.js:2547)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._preparseLoadedTemplate (compiler.js:14102)
    at compiler.js:14094
    at Object.then (compiler.js:2538)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._preParseTemplate (compiler.js:14094)
    at DirectiveNormalizer.push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer.normalizeTemplate (compiler.js:14080)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:17282)
    at compiler.js:24906
    at Array.forEach (<anonymous>)
    at compiler.js:24905

Answer 1

Я думаю, вы должны вернуться к угловым урокам.Поработайте над дополнительными примерами для реактивных форм.

<div>
    <form [formGroup]="formdata" (ngSubmit)="onClick(formdata.value)">
        <input type="text" name="name" placemame="Name" formControlName="name"/>
        <br/>
        <input type="text" name="email" placeholder="Email" formControlName="emailid"/>
        <br/>
        <input type="password" name="password" placeholder ="Passkey" formControlName="password"/>
        <br/>
        <input type="submit" value="Login">
    </form>
    <br>

    <p>
        Email:{{formdata.get('emailid').value}}
        Name:{{formdata.get('name').value}}
    </p>

    <br/>

    <br/>
    <br/>
    <ul>
        <li>
            <a routerLink="list">list</a>
        </li>
        <li>
            <a routerLink="list2">list2</a>
        </li>
    </ul>

    <br/>
</div>

ButtonOverviewExample.ts

import { Component } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";

@Component({
  selector: "button-overview-example",
  templateUrl: "button-overview-example.html",
  styleUrls: ["button-overview-example.css"]
})
export class ButtonOverviewExample {
  id: string;
  name: string;
  username: string;
  title = "testang";
  todaydate = new Date();
  cs;
  httpdata;
  formdata;
  emailid;
  password;

  owner = { name: "Corvus", age: "22", address: "I change VPN" };
  months = [
    "January",
    "Feburary",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ];

  constructor() {}
  myClick() {}
  displaydata(data) {
    this.httpdata = data;
  }

  ngOnInit() {
    this.formdata = new FormGroup({
      name: new FormControl("Johnny"),
      emailid: new FormControl("", Validators.required),
      password: new FormControl("", Validators.required)
    });
  }
  onClick(data) {
    //this.formdata="data.emailid";
    //this.formdata=data.name;
  }
}

Answer 2

Я только что попробовал это на stackblitz, и все, кажется, хорошо (по крайней мере, в части HTML).Вот моя ссылка: https://stackblitz.com/edit/angular-puca4m

Попробуйте перезапустить приложение (закройте компилятор и снова откройте и запустите "ng serve").