Angular: Ensure that form control is disabled correctly to preserve the value for later retrieval

Question

Angular: Ensure that form control is disabled correctly to preserve the value for later retrieval

Here is my angular reactive form setup:

  zoneEntryForm = new FormGroup({
    code: new FormControl(''),
    zonename: new FormControl(''),
  });

The output I'm getting from this code is:

  onSubmit() {
    // TODO: Use EventEmitter with form value
    console.warn(this.zoneEntryForm.value);
  }

output

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

[Note: code is a number, zone is a string]

Now, I need to read the value from both the code and zone, but I want the code field to be disabled. The code is retrieved from the database and the user won't input it. Later, I need to send this code and zone name somewhere else.

Both fields should be blank by default.

Here are my attempts:

Attempt 1:

  zoneEntryForm = new FormGroup({
    code: new FormControl({value: '', disabled: true}),
    zonename: new FormControl(''),
  });

output: https://i.sstatic.net/SJ2eT.png

As you can see, the code field is no longer being read by onSubmit

Attempt 2:

  zoneEntryForm = new FormGroup({
    code: new FormControl({disabled: true}),
    zonename: new FormControl(''),
  });

output :

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

Now, my default blank value is gone

So, how can I make the code field disabled and still be able to read from it properly at the same time?

angular typescript angular-reactive-forms

Answer 1

Answer №1

If you want to retrieve the value of a disabled FormControl, you can use the getRawValue() method on the FormGroup

this.zoneEntryForm.getRawValue()

Check out this stackblitz for a working example

Typescript Code

export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  zoneEntryForm = new FormGroup({
    code: new FormControl({
      value: '1234',
      disabled: true
    }),
    zonename: new FormControl('testzone'),
  });

  ngOnInit() {
    console.log(this.zoneEntryForm.getRawValue());
    console.log(this.zoneEntryForm.getRawValue().code);
    console.log(this.zoneEntryForm.getRawValue().zonename);
  }
}

Answer 2

If you want to retrieve the value of a disabled FormControl, you can use the getRawValue() method on the FormGroup

this.zoneEntryForm.getRawValue()

Check out this stackblitz for a working example

Typescript Code

export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  zoneEntryForm = new FormGroup({
    code: new FormControl({
      value: '1234',
      disabled: true
    }),
    zonename: new FormControl('testzone'),
  });

  ngOnInit() {
    console.log(this.zoneEntryForm.getRawValue());
    console.log(this.zoneEntryForm.getRawValue().code);
    console.log(this.zoneEntryForm.getRawValue().zonename);
  }
}

Answer 3

Answer №2

To set a default value for code and retrieve it upon submission, follow a similar method of assigning a predefined value for code. If the value is dependent on an action, you can declare a public variable and assign it accordingly.

this.codeValue = 'testCode'; //or assign anywhere based on condition 
zoneEntryForm = new FormGroup({
    code: new FormControl({value: this.codeValue, disabled: true}),
    zonename: new FormControl(''),
  });

Answer 4

To set a default value for code and retrieve it upon submission, follow a similar method of assigning a predefined value for code. If the value is dependent on an action, you can declare a public variable and assign it accordingly.

this.codeValue = 'testCode'; //or assign anywhere based on condition 
zoneEntryForm = new FormGroup({
    code: new FormControl({value: this.codeValue, disabled: true}),
    zonename: new FormControl(''),
  });

Angular: Ensure that form control is disabled correctly to preserve the value for later retrieval

Answer №1

Answer №2

Similar questions

"Upon studying the Reflect-metadata index.d.ts file, I find myself perplexed by the variances in

Refreshing the browser causes Angular route to display raw JSON data

Remove the hyphen from a user input field using Angular 2 and reactive forms

The function doc.fromHTML is not recognized in Angular 6

Closing Popover Instance from another Component (Ionic, Typescript)

Retrieve all data values from a form using the ngModel directive within an Angular application

Encountering issues with building NX Angular Storybook

Having trouble with Typescript accurately converting decimal numbers?

Evaluate the Worth of a Property Established in a Subscription

Select a randomly generated number from an array, which dynamically updates every time the browser is refreshed

What steps can I take to troubleshoot and fix the issue of a Duplicate identifier 'DateType' error during the React/Typescript building process

Obtain the function's return type without actually executing the function

What's the issue with conducting a unit test on a component that has dependencies with further dependencies?

Unit Testing JWT in Angular 2

Having trouble with importing ResizeSensor library into typescript

Updating the parent component upon navigating from the child component in Angular app

Does anyone know of a custom typeguard that enforces the presence of elements in an array?

How can I update a value using a specific key in Angular?

By upgrading to Bootstrap 5, the emptyPlaceholder in the file-drag-drop feature is transformed into a sleek gray loading block

Using *ngFor to dynamically update the DOM when an array is modified via ngrx