The values for the FormControl number are predetermined, but they will only appear once they have been interacted

Question

The values for the FormControl number are predetermined, but they will only appear once they have been interacted

Currently, I am facing an issue where the form input fields are not being populated with data from the model that needs to be edited. While the text input fields function correctly, the number fields remain empty until I click on them, and in some cases, they only update after clicking on all previous number fields. Here is the HTML code snippet:

<form [formGroup]="servis.editCarFrom" style="width: 320px;">
    <div class="form">
    
        [...]
        
    </div>
</form>

In addition, here is the section of code responsible for setting the control values:

InitEditCarForm(kola: any) {
    let naziv = kola.naziv.split('-');
    let marka = naziv[0];
    let model = naziv[1];
    let tip = TipVozila[kola.tipVozila];
    
    [...]

    this.editCarForm.markAllAsTouched();
}

Despite this implementation, I am noticing a delay in updating the values on the page, and not all fields are getting updated as expected. Is there a more efficient approach to handling this? If not, how can I ensure that the number fields display their correct values automatically once the page has finished loading?

angular typescript forms angular-reactive-forms

Answer 1

Answer №1

When declaring your form group, you have the option to set initial values for each form control.

formGroup = new FormGroup({
   firstInput: new FormControl(value1),
   secondInput: new FormControl(value2)
});

To update the values in your form group later on, you can use either setValue or patchValue directly on the form group. The difference is that setValue requires updating all inputs, while patchValue allows updating specific controls without affecting others. Here's an example:

formGroup = new FormGroup({
control1: new FormControl('initial value'),
control2: new FormControl(null),
control3: new FormControl(12) 
});

function updateAllValues() {
  this.formGroup.setValue({
    control1: 'new value',
    control2: true,
    control3: 42
  );
}

function updateSomeValues() {
  this.formGroup.patchValue({
    control1: 'new extra value',
    control3: 42
  );
}

Answer 2

When declaring your form group, you have the option to set initial values for each form control.

formGroup = new FormGroup({
   firstInput: new FormControl(value1),
   secondInput: new FormControl(value2)
});

To update the values in your form group later on, you can use either setValue or patchValue directly on the form group. The difference is that setValue requires updating all inputs, while patchValue allows updating specific controls without affecting others. Here's an example:

formGroup = new FormGroup({
control1: new FormControl('initial value'),
control2: new FormControl(null),
control3: new FormControl(12) 
});

function updateAllValues() {
  this.formGroup.setValue({
    control1: 'new value',
    control2: true,
    control3: 42
  );
}

function updateSomeValues() {
  this.formGroup.patchValue({
    control1: 'new extra value',
    control3: 42
  );
}

Answer 3

Answer №2

I encountered a similar issue that was resolved by implementing an *ngIf directive on the element containing all the lists/methods that may not have been initialized at the beginning.

For instance, it seems like your "GetTipovi()" method could be returning an incomplete list when the page initially loads. However, due to two-way binding, your loop still populates with values whenever "GetTipovi()" eventually returns something.

Consider adding an *ngIf directive to the element displaying the list returned from "GetTipovi()" to potentially address this problem.

Answer 4

I encountered a similar issue that was resolved by implementing an *ngIf directive on the element containing all the lists/methods that may not have been initialized at the beginning.

For instance, it seems like your "GetTipovi()" method could be returning an incomplete list when the page initially loads. However, due to two-way binding, your loop still populates with values whenever "GetTipovi()" eventually returns something.

Consider adding an *ngIf directive to the element displaying the list returned from "GetTipovi()" to potentially address this problem.

The values for the FormControl number are predetermined, but they will only appear once they have been interacted

Answer №1

Answer №2

Similar questions

Incorporate HTML elements within an Angular component

Issue with vendor.bundle.js while Using Angular2 App on Internet Explorer 11

Issue encountered while attempting to access a GitHub repository

Learn the correct way to export a React class component with proper type declarations

Passing along the mouse event to the containing canvas element that utilizes chart.js

Is there a way to refresh a JSON file in an Angular app without needing to recompile the entire application?

Using createStyles in TypeScript to align content with justifyContent

Angular: Converting this code into a loop - A step-by-step guide

What is the best way to determine the total of values from user-input fields that are created dynamically

Running multiple chained, variable dependent pipes in Angular 2: A step-by-step guide

What is the method for uploading a file from a form using Client.post() in a Django test?

The Angular Material Table is refusing to display external data when the page first loads

What is the access URL when using Angular 2's npm start command?

How can one effectively showcase boxes? (Algorithm, UI)

Having trouble manipulating text or values of angular elements with Selenium and Python

The TypeScript factory class anticipates an intersection

Create a Typescript index signature that incorporates individual generic types for each field

Ensure that in Django bootstrap4, the parameter "form" is populated with a functioning Django Form

Tips for determining if an array of objects, into which I am adding objects, contains a particular key value present in a different array of objects

Tips on instructing TypeScript to view a parameter as a namespace instead of a class, especially when they share the same name - gRPC