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


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.


<div class="card m-3">
<div class="card-body">
<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
  <div class="form-group col-5">
    <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 class="form-group col-5">
    <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 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>


<!doctype html>
<html lang="en">
<meta charset="utf-8">
<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" />

Rendered page


Source: Angular Questions

Categorized as angular, html Tagged ,


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us