CODEWITHSUNDEEP
formsangularangular2-observablesangular-reactive-forms
FussinHussin
FussinHussin

Reputation: 1814

get value of async pipe form value (observable in value attribute of input)

I have text form inputs, and I want them to act as forms and also display the values set when the form is submitted. the problem is when i submit the form, and get the value for start (form.controls.start.value) i get an error because that value is an observable when I look at the form in the console. the error says cannot get value of undefined.

I have the observable start$ which is populating my input with the current value:

<div class="col">
     Pool Start:
</div>
<div class="col">
     <input
           type="text"
           class="form-control"
           formControlName="start"
           [value]="start$ | async"
     >
</div>

it is part of a form:

this.dhcpForm = this.formBuilder.group({
            'start': [this.start$],
            'end': [this.end$],
            'lease': [this.lease$]
});

and this is my submit function assigning the form values:

console.log(dhcpForm);
const start = dhcpForm.controls.start.value;
const end = dhcpForm.controls.end.value;
const lease = dhcpForm.controls.lease.value;

again to re-iterate my question, how do I render the values inside the input field after the form is submitted when the value is 'observable'?

here is the form output: form values are observables

here is an example of my code*(*please edit this code in a separate window or fork so this version stays the same for all)

Upvotes: 0

Views: 2249

Answers (1)

Eeks33
Eeks33

Reputation: 2315

I looked at the live sample, I can make it work by removing async pipe and using patchValue to set the forms. See the forked version:

https://stackblitz.com/edit/angular-ipe8hd

Does this achieve the effect you're looking for? I don't think you need to do [value] or use async pipe here at all... The fork is even less code. Let me know if this is the functionality you're going for and if you'd like it to look a certain way.

Upvotes: 1

Related Questions