使用Angular框架开发表单页面渲染仅显示2个字段问题求助

我正在使用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>

问题原因 #

• 模板语法错误：StudentID输入框的属性绑定写为ngClass]，缺失开头的[符号，属于无效模板语法，会触发Angular模板解析异常，导致后续元素渲染中断或者布局错乱
• Bootstrap栅格规范错误：col-5类必须嵌套在带有row类的父容器内使用，否则栅格的浮动、边距逻辑会异常，出现元素重叠、溢出等问题
• 样式类误用：错误提示文本的容器使用了form-control类，该类为输入框专属样式，会让提示文本占用输入框的布局空间，挤压其他正常控件的显示位置

修复方案 #

1. 修正ngClass的语法错误，补全开头的[符号
2. 给所有col-5的外层添加row类容器，符合Bootstrap栅格使用规范
3. 将错误提示容器的form-control类替换为invalid-feedback，匹配Bootstrap表单校验提示的样式规范
4. 删掉重复的错误提示空容器，合并提示逻辑

修复后的Component.html代码 #

<div class="card m-3">
  <div class="card-body">
    <form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
      <!-- 新增row容器包裹栅格列 -->
      <div class="row">
        <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">first name is required</div>
        </div>
      </div>
      <div class="row">
        <div class="form-group col-5">
          <label>StudentID:</label>
          <!-- 修正ngClass语法错误 -->
          <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="invalid-feedback">Student ID is required</div>
        </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-secondary mr-1" (click)="onReset()">Reset</button>
      </div>
    </form>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Chaitanya Chitturi