Reactive Form value is not displaying in view because of FormControlName issue

Question

Reactive Form value is not displaying in view because of FormControlName issue

I have successfully retrieved data from the database and need to pre-fill an update form with preset values. The issue I am facing is that when I add FormControlName to the input field, it removes the preset values. I have tried using setValue and patchValue methods but to no avail. Any suggestions on why this might be happening or a possible solution? Thank you in advance.

        
        <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
          <div class="snippet-code">
            <pre class="snippet-code-js lang-js prettyprint-override"><code>         
             ngOnInit() {
                 this.currUserId = this.userId$.value;
                 this.authService
               .findOne(this.currUserId)
                .pipe(map((user: User) => (this.currentUser = user)))
                .subscribe();
                }
             
                  <div class="tab-container" *ngIf="currentUser">
      
                   <form [formGroup]="accountForm" (ngSubmit)="submit()">
                    <ion-card class="personal-form">
                   <h3>Personal Details</h3>
                   <div class="form-input">
                   <label>FirstName</label>
                   <input
                   formControlName="firstName"
                   type="text"
                     value="{{currentUser.firstName }}"
                       />
                    </div>
          
                   <div class="form-input">
                    <label>surname</label>
                    <input
                    formControlName="surname"
                   type="text"
                   value="{{ currentUser.surname }}"
                 />
                  </div>
              </form>
          </div>

javascript angular typescript angular-reactive-forms

Answer 1

Answer №1

Try using the "formBuilder" instead of directly passing a value in the input field.

constructor(
  ...
  private _fb: FormBuilder,
){}

ngOnInit() {
  this.accountForm = this._fb.group({
      firstName: [''],
      surname: [''],
  });
  this.getCurrentUser();
}

getCurrentUser() {
      this.currUserId = this.userId$.value;
      this.authService
            .findOne(this.currUserId)
            .subscribe((user: User) => {
                 this.currentUser = user;
                 this.accountForm.patchValue(this.currentUser);
       });
  }
}

Make sure to eliminate both instances of value="{{currentUser.firstName }}" from the HTML form code.

Answer 2

Try using the "formBuilder" instead of directly passing a value in the input field.

constructor(
  ...
  private _fb: FormBuilder,
){}

ngOnInit() {
  this.accountForm = this._fb.group({
      firstName: [''],
      surname: [''],
  });
  this.getCurrentUser();
}

getCurrentUser() {
      this.currUserId = this.userId$.value;
      this.authService
            .findOne(this.currUserId)
            .subscribe((user: User) => {
                 this.currentUser = user;
                 this.accountForm.patchValue(this.currentUser);
       });
  }
}

Make sure to eliminate both instances of value="{{currentUser.firstName }}" from the HTML form code.

Reactive Form value is not displaying in view because of FormControlName issue

Answer №1

Similar questions

When determining the extent to which client-side code should be utilized

I came across a forum where someone mentioned encountering a similar issue but unfortunately, no solution was provided. Currently, I am working on setting up a reaction roles system but despite embedding the message, the role is not being

Utilize JavaScript and jQuery to locate a particular character within a string and move it one position back in the sequence

How is it possible for the output to be a string array when the variable was declared as a number in TypeScript?

The data seems to have disappeared from the HTTP requests in my Express and Mongoose project

Canvas with a button placed on top

Using v-on:click to dynamically update multiple sections of content in a Vue.js and Liquid environment

Retrieve JSON data using AngularJS

File download is initiated through an Ajax response

Removing a field from a collection using firebase-admin: Tips and tricks

Performing an AJAX call using jQuery within a PhoneGap application to communicate with a Node JS server

Using React to display data from a nested JSON object in a table

Acquire information from a Card using Oracle Apex

Is it achievable to dynamically generate new pages on initial load in NextJS?

Design a personalized .OBJ / .MTL file and showcase it using the power of three.js

JavaScript: create a button that dynamically changes size and color when scrolling

The date selected in the date picker does not display in the view until the calendar is opened

Merging two promises into a single promise in Angular

Encountering the error message 'array expected for services config' within my GitLab CI/CD pipeline

How can I fetch data from SQL using JavaScript based on a specific value in PHP?