我正试图使用Angular框架创建一个表单，但在呈现页面时无法显示两个以上的字段。
Component.html
<div class="card m-3">
<div class="card-body">
<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
<div class="form-group col-5">
<label>UserName:</label>
<input id="name" type="text" formControlName="fName" class="form-control" [ngClass]="{'is-invalid':submitted && f['fName'].errors}"/>
<div *ngIf="submitted && f['fName'].errors" class="invalid-feedback"></div>
<div *ngIf="submitted && surveyForm.controls['fName'].errors" class="form-control">first name is required</div>
</div>
<div class="form-group col-5">
<label>StudentID:</label>
<input id="StudentId" type="text" formControlName="StudentId" class="form-control" ngClass]="{'is-invalid':submitted && f['StudentId'].errors}"/>
<div *ngIf="submitted && surveyForm.controls['StudentId'].errors" class="form-control">first name is required</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary mr-1" (click)="onSubmit()">Submit</button>
<button type="button" class="btn btn-primary mr-1" (click)="onReset()">Reset</button>
</div>
</form>
</div>
</div>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Survey</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="//netdna.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet" />
</head>
<body>
<app-root></app-root>
</body>
</html>
渲染页面
https://ibb.co/tMs4nNW
输入错误，检查第二个输入
<input id="StudentId" type="text" formControlName="StudentId" class="form-control" ngClass]="{'is-invalid':submitted && f['StudentId'].errors}"/>
ngClass属性未命中[渲染引擎无法正确识别输入并将其从视图中排除
试试
<input id="StudentId" type="text" formControlName="StudentId" class="form-control" [ngClass]="{'is-invalid':submitted && f['StudentId'].errors}"/>
您在指令中出现打字错误：
尝试在student:ID 下使用[ngClass]而不是ngClass]