I am trying to create a form using Angular framework unable to display all the fields-CodePudding

I am trying to create a form using the Angular framework but I am unable to display more than two fields when the page is being rendered.

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>

Rendered page

https://ibb.co/tMs4nNW

CodePudding user response：

Typo error, check the second input

    <input id="StudentId" type="text" formControlName="StudentId" class="form-control" ngClass]="{'is-invalid':submitted && f['StudentId'].errors}"/>

the ngClass attribute miss [ the rendering engine does not recognize properly the input and exclude it from view

Try it

    <input id="StudentId" type="text" formControlName="StudentId" class="form-control" [ngClass]="{'is-invalid':submitted && f['StudentId'].errors}"/>

CodePudding user response：

You are having typo error in the directive :

Try using [ngClass] instead of ngClass] under the student:ID