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

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>
   </div>
</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>
   </div>
</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>
   </div>
</div>
<div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Update</button>
   </div>
</div>
</form>

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

this.registerForm.get('firstName').setValue(data.name);
this.registerForm.get('email').setValue(data.email);
this.registerForm.get('phone').setValue(data.phone);

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

Jassa

Thank you