Angular 角度形式的意外EOF字符错误,为什么?
我在angular中使用form builder创建了这个表单,但它在控制台中抛出了一个错误 错误: compiler.js:1021未捕获错误:模板分析错误: 意外字符“EOF”(“rity.value,responsible.value)”mat凸起按钮color=“primary”>保存 代码:Angular 角度形式的意外EOF字符错误,为什么?,angular,typescript,angular6,mean-stack,angular-reactive-forms,Angular,Typescript,Angular6,Mean Stack,Angular Reactive Forms,我在angular中使用form builder创建了这个表单,但它在控制台中抛出了一个错误 错误: compiler.js:1021未捕获错误:模板分析错误: 意外字符“EOF”(“rity.value,responsible.value)”mat凸起按钮color=“primary”>保存 代码: 原因是您忘记关闭textareatag <textarea ... formControlName="description" #description></textarea
原因是您忘记关闭
textarea
tag
<textarea ... formControlName="description" #description></textarea>
/\
||
add this
/\
||
加上这个
Angular遵循HTML规范规定的相同限制您在mat select中出错。不能在mat select上创建模板变量。 我不明白你为什么要这样传递值。在反应形式中,不建议使用这种方法。 将您的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>
你能不能用issue@yurzui我关上了,但还是一样issue@JavascriptLover-SKT:我不明白。。我是beginner@yurzui当前位置把那个写在答案中,这样我就可以标记为答案。。塔恩克斯人
<textarea ... formControlName="description" #description></textarea>
/\
||
add this
<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>
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() {
}
}