Angular getRawValue() does not fetch [values] from reactive form

Question

I have an angular reactive form on which apart from many other controls I have two that I can’t get the value of onSubmit().

See Val1 and Val2:

buildForm() {
        this.createRequestForm = this.form.group({
            Name: ['', [Validators.required, CustomValidatorService.validateCharacters]],
            Comments: ['', [CustomValidatorService.validateCharacters]],
         …
            Val1: [{ value: '', disabled: true }],
            Val2: [{ value: '', disabled: true }],

HTML:

<input name="Val1" matInput formControlName="Val1" placeholder="Val 1" [value]="valModel?.val1">

...and same for val2.

Here’s the way I populate the val1 and val2

    this.createRequestForm.get('Name').valueChanges
        .subscribe(value => {
            if (value && value.length === 6) {
                this.commonHttpService.getValDetails(value)
                    .subscribe(valModel => this.valModel = valModel);
            }
        });

As you can see the values for val1 and val2 come from a http call, that binds theresults to this.valModel and thn it automatically populates the form.

Everything works fine, the values are populated on the screen but when I am trying to submit the form using

.getRawValue()

it shows val1=”” and same for val2…

I guess it is the way I bind those values to controls?

Any idea?

T. Shashwat · Accepted Answer · 2018-10-10 09:24:32Z

1

Try

this.createRequestForm.value.val1

to fetch value of createRequestForm (form) fields

answered Oct 10, 2018 at 9:24

T. Shashwat

1,16510 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tom33pr Over a year ago

Is that the only way? Im sending JSON away and woudl have to be doing some stitching to get these included...I was thinking maybe something is wrong with the way I have those controls wired up and fixing up html would include those values in the form...

T. Shashwat Over a year ago

also define a function get f() { return this.createRequestForm.controls; } and use function to fetch values in reactive forms

T. Shashwat Over a year ago

there can be many ways but i have shared what I have used in my reactive form if you want i can share my code.

tom33pr Over a year ago

I'm just going to go with what I previously thought of doing... i will assign these values manually in the http call subscription... eg: this.createRequestForm.get('Val1').setValue(this.valModel.val1); and same for val2. Thanks though.

Collectives™ on Stack Overflow

Angular getRawValue() does not fetch [values] from reactive form

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related