Home Angular 8 Angular 9 – How to make ngform input pre-filled?

Angular 9 – How to make ngform input pre-filled?

by therichpost
0 comment
Angular 9 - how to reset form after submit?

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 – How to make ngform input pre-filled?

Post Working:

In this post, I am making angular 9 ngform input prefilled during updation time. Form Angular 9 good looks, I have also used Bootstrap 4.

Here is the code snippet and please use carefully:

1. Here is my HTML code and I have added to my app.component.html file:

I have added some code related to validation so for that you can check my old posts related to reactive form validations

<form class="form-horizontal" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group">
   <label class="control-label col-sm-2" for="name">Name:</label>
   <div class="col-sm-10">
      <input type="text" class="form-control" id="uname" placeholder="Enter Name" name="uname" formControlName="firstName" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }">
      <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
         <div *ngIf="f.firstName.errors.required">First Name is required</div>
<div class="form-group">
   <label class="control-label col-sm-2" for="email">Email:</label>
   <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email" formControlName="email" [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
      <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
         <div *ngIf="f.email.errors.required">Email is required</div>
         <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
<div class="form-group">
   <label class="control-label col-sm-2" for="phone">Phone:</label>
   <div class="col-sm-10">
      <input type="text" class="form-control" id="phone" placeholder="Enter Phone" name="phone" formControlName="phone" [ngClass]="{ 'is-invalid': submitted && f.phone.errors }">
      <div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
         <div *ngIf="f.phone.errors.required">Phone is required</div>
<div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Update</button>


2. Here is code and I have added into my add.component.ts file:

I have added the value to my ngform input during API call and this code is only for to put the values and you can use this code with your own way according to requirements

registerForm: FormGroup

registerForm connects formdata with value and valid state

// I have used setValue function



If you have any kind of query regarding ngform then you can comment below.


Thank you

You may also like

Leave a Comment

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