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

Published

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

Source: Angular Questions

Published
Categorized as angular, html Tagged ,

Answers

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
faq