CODEWITHSUNDEEP
formsangularreactiveangular-forms
Maaz Hasan
Maaz Hasan

Reputation: 83

Display Reactive form elements concurrently real-time in Angular

I am having problem figuring out how to display the form elements/values concurrently as they are being entered/inputted by the user. I wish to display them while the user is still typing and has not yet pressed the submit button.

The json pipes have allowed me to display all the elements but I cannot figure out how to display a singular element in the HTML code. 

    {{commentForm.value | json}}

I can access all the elements using the above JSON pipe but want to access singular elements.

Sample Angular Reactive Form code below. 

<form novalidate [formGroup]="commentForm" (ngSubmit)="onSubmit()">
        <p>
            <md-input-container class="full-width" dividerColor="{{formErrors.author ? 'warn': 'primary'}}" >
                <input mdInput formControlName="author" placeholder="Name" type="text" required>

                <md-hint>
                    <span [hidden] = "!(formErrors.author)">
                        {{formErrors.author}}
                    </span>
                </md-hint>

            </md-input-container> 
            <md-input-container class="full-width" dividerColor="{{formErrors.rating ? 'warn': 'primary'}}" >
                <input mdInput formControlName="rating" placeholder="Rating" type="number" pattern="[0-5]*" required>
                <md-hint>
                    <span [hidden] = "!(formErrors.rating)">
                        {{formErrors.rating}}
                    </span>
                </md-hint>
            </md-input-container> 
            <md-input-container class="full-width" dividerColor="{{formErrors.comment ? 'warn': 'primary'}}" >
                <input mdInput formControlName="comment" placeholder="Your Comment" type="text" required>
                <md-hint>
                    <span [hidden] = "!(formErrors.comment)">
                        {{formErrors.comment}}
                    </span>
                </md-hint>
            </md-input-container>
        </p>
         <button type="submit" md-button class="background-primary text-floral-white" [disabled]="commentForm.invalid">Submit</button>            
    </form>

I wish to display the author, rating and the comments individually. Is there any way to do so?

Upvotes: 8

Views: 10363

Answers (1)

stojevskimilan
stojevskimilan

Reputation: 1030

FormGroup is a object that contains value that is a object that contains your formControl properties

To access invidiual values

<p>{{commentForm.value.author}}</p>

<p>{{commentForm.value.rating}}</p>

<p>{{commentForm.value.comment}}</p>

Upvotes: 16

Related Questions