angular 格式出现意外的 EOF 字符错误，为什么？

Question

我在 angular 中使用表单生成器制作了此表单，但它在控制台中抛出错误。

错误：

compiler.js:1021 未捕获错误：模板解析错误：意外字符 "EOF" ("rity.value, responsible.value)" mat-raised-button color="primary">保存

代码：

<mat-card>
  <form [formGroup]="createForm" class="create-form">
    <mat-form-field class="field-full-width">
      <input matInput placeholder="Title" formControlName="title" #title>
    </mat-form-field>
    <mat-form-field class="field-full-width">
      <input matInput placeholder="Responsible" formControlName="responsible" #responsible>
    </mat-form-field>
    <mat-form-field class="field-full-width">
        <textarea matInput placeholder="Description" formControlName="description" #description>
    </mat-form-field>
    <mat-form-field class="field-full-width">
       <mat-select placeholder="Severity" formControlName="severity" #severity>
         <mat-option value="low">Low</mat-option>
         <mat-option value="medium">Medium</mat-option>
         <mat-option value="high">High</mat-option>
       </mat-select>
    </mat-form-field>
    <mat-divider></mat-divider>
    <br>
    <br>
    <button mat-raised-button color="accent" routerLink="/list">Back</button>
    <button type="submit" (click)="addIssue(title.value, description.value, severity.value, responsible.value)" mat-raised-button color="primary">Save</button>
  </form>
</mat-card>

.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import {IssueService} from '../../../issue.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {

  createForm: FormGroup;

  constructor(private Issue: IssueService, private router: Router, private fb: FormBuilder) {
      this.createForm = this.fb.group({
        title: '',
        description: '',
        severity: '',
        responsible: ''
      });
  }

  addIssue(title, description, responsible, severity) {
      this.Issue.addIssue(title, description, severity, responsible).subscribe(() => {
        console.log('Issue added');
        this.router.navigate(['/list']);
      });
  }

  ngOnInit() {
  }

}

Answer 1

这是因为您忘记关闭 textarea 标签。

 <textarea ... formControlName="description" #description></textarea>
                                                             /\
                                                             ||
                                                          add this

Angular 遵循 HTML 规范规定的相同限制

Answer 2

你在 mat-select 中犯了错误。您不能在 mat-select 上创建模板变量。我不明白你为什么要传递这样的价值观。这不是 ReactiveForms 中推荐的方法。将您的 html 替换为以下内容：

<mat-card>
  <form [formGroup]="createForm" class="create-form">
    <mat-form-field class="field-full-width">
      <input matInput placeholder="Title" formControlName="title">
    </mat-form-field>
    <mat-form-field class="field-full-width">
      <input matInput placeholder="Responsible" formControlName="responsible">
    </mat-form-field>
    <mat-form-field class="field-full-width">
        <textarea matInput placeholder="Description" formControlName="description">
    </mat-form-field>
    <mat-form-field class="field-full-width">
       <mat-select placeholder="Severity" formControlName="severity">
         <mat-option value="low">Low</mat-option>
         <mat-option value="medium">Medium</mat-option>
         <mat-option value="high">High</mat-option>
       </mat-select>
    </mat-form-field>
    <mat-divider></mat-divider>
    <br>
    <br>
    <button mat-raised-button color="accent" routerLink="/list">Back</button>
    <button type="submit" (click)="addIssue()" mat-raised-button color="primary">Save</button>
  </form>
</mat-card>

用以下内容替换您的组件：

从“@angular/core”导入{组件，OnInit}；

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import {IssueService} from '../../../issue.service';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {

  createForm: FormGroup;

  constructor(private Issue: IssueService, private router: Router, private fb: FormBuilder) {
      this.createForm = this.fb.group({
        title: '',
        description: '',
        severity: '',
        responsible: ''
      });
  }

  addIssue() {
      this.Issue.addIssue(...this.createForm.value).subscribe(() => {
        console.log('Issue added');
        this.router.navigate(['/list']);
      });
  }

  ngOnInit() {
  }

}

angular 格式出现意外的 EOF 字符错误，为什么？

Unexpected EOF character error in angular form, why ?

typescript

mean-stack

angular

angular-reactive-forms

angular6