How can I show the data from an http request on a form field in Angular? I want the user to be able to edit the data and submit it. The email, firstname, etc. should display in the input fields.

When the edit button is clicked, I want the form field values to get populated with the data retrieved from getUserDetails like firstname, lastname, etc., instead of using {{this.data.emailAddress}} as shown below.

#init

ngOnInit(): void {
    this._activatedRoute.queryParams.subscribe((params) => {
      this.userId = params.id;
      this.getUserGeneralDetails();
    });
  }

#constructor

 constructor(
    private _activatedRoute: ActivatedRoute,
    private _notificationService: NotificationService,
    private _userProfileService: UserProfileService,
    private _router: Router,
    private fb: FormBuilder
  ) {
    this.generalForm.disable();
    this.securityForm.disable();
  }

I only want to display the data on the form field when Edit is clicked.

 generalForm = new FormGroup({
    email: new FormControl(),
    fname: new FormControl(),
    lname: new FormControl(),
    phone: new FormControl(),
    companyName: new FormControl(),
    title: new FormControl(),
  });

New to Angular and looking for techniques and ideas. Thank you.

https://i.sstatic.net/Cay7S.png

---

https://i.sstatic.net/j3EJB.png #template

 <div class="card" #generalCard>
            <span class="anchor" id="general"></span>
            <div class="card-header">
                <mat-icon class="card-icon">group</mat-icon>
                <div class="title">GENERAL</div>
                <div class="spacer"></div>
                <button mat-button *ngIf="generalForm.disabled" (click)="generalForm.enable()">
                    <mat-icon>edit</mat-icon> Edit
                </button>
                <button mat-button *ngIf="generalForm.enabled" (click)="generalForm.disable()">
                    Cancel
                </button>
                <button mat-stroked-button *ngIf="generalForm.enabled" (click)="saveGeneralFormChanges()">
                    Save Changes
                </button>
            </div>
            <div class="card-content" *ngIf="generalForm.disabled" >
                <div class="line-item">
                    <div class="title">EMAIL</div>
                    <div class="detail">{{this.data.emailAddress}}</div>
                    <mat-icon class="active" style="color:#00B0DB;">check_circle</mat-icon>
                </div>

                <div class="line-item">
                    <div class="title">EMAIL</div>
                    <div class="detail">{{this.data.emailAddress}}</div>
                    <mat-icon>check_circle_outline</mat-icon>
                    <button mat-button class="detail active">Resend welcome email</button>
                </div>

                <div class="line-item">
                    <div class="title">FIRST NAME</div>
                    <div class="detail">{{this.data.firstName}}</div>
                </div>

                <div class="line-item">
                    <div class="title">LAST NAME</div>
                    <div class="detail">{{this.data.lastName}}</div>
                </div>

                <div class="line-item">
                    <div class="title">PHONE NUMBER</div>
                    <div class="detail">+1 {{this.data.phoneNumber}}</div>
                </div>

                <div class="line-item">
                    <div class="title">COMPANY NAME</div>
                    <div class="detail">{{this.data.companyName || 'None'}}</div>
                </div>

                <div class="line-item">
                    <div class="title">TITLE</div>
                    <div class="detail">{{this.data.title || 'None'}}</div>
                </div>
            </div>

#GetUserData

getUserGeneralDetails() {
    this.isInProgress = true;
    this._userProfileService
      .getUserGeneralDetails(this.userId)
      .pipe(finalize(() => (this.isInProgress = false)))
      .subscribe({
        next: (res) => {
          if (res.isSuccess) {
            this.data = res.data;
          }
        },
        error: (err) => this._notificationService.showError(err),
        complete: noop,
      });
  }

#field code

<div class="card-content" *ngIf="generalForm.enabled">
                <form [formGroup]="generalForm" class="generalForm">
                    <mat-form-field appearance="fill" class="email">
                        <mat-label>Email</mat-label>
                        <input matInput formControlName="email" />
                    </mat-form-field>
                    <button mat-raised-button class="validateEmail">Validate email</button>
                    <mat-divider></mat-divider>
                    <mat-form-field appearance="fill" class="fname">
                        <mat-label>First Name</mat-label>
                        <input matInput formControlName="fname" />
                    </mat-form-field>
                    <mat-form-field appearance="fill" class="lname">
                        <mat-label>Last Name</mat-label>
                        <input matInput formControlName="lname" />
                    </mat-form-field>
                    <mat-form-field appearance="fill" class="phone">
                        <mat-label>Phone Number</mat-label>
                        <input matInput formControlName="phone" />
                    </mat-form-field>
                    <mat-form-field appearance="fill" class="companyName">
                        <mat-label>Company Name</mat-label>
                        <input matInput formControlName="companyName" />
                    </mat-form-field>
                    <mat-form-field appearance="fill" class="title">
                        <mat-label>Title</mat-label>
                        <input matInput formControlName="title" />
                    </mat-form-field>
                </form>
            </div>
        </div>