CODEWITHSUNDEEP
angularangular-reactive-forms
tom33pr
tom33pr

Reputation: 1023

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

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?

Upvotes: 1

Views: 5446

Answers (1)

T. Shashwat
T. Shashwat

Reputation: 1165

Try

this.createRequestForm.value.val1

to fetch value of createRequestForm (form) fields

Upvotes: 1

Related Questions