在Angular

Question

我在确定如何在用户输入/输入时同时显示表单元素/值时遇到问题。我希望在用户仍在键入时显示它们，但尚未按下提交按钮。

json管道允许我显示所有元素，但我无法弄清楚如何在HTML代码中显示单个元素。

    {{commentForm.value | json}}

我可以使用上面的JSON管道访问所有元素，但想要访问单个元素。

以下示例Angular Reactive Form代码。

<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>

我希望单独显示作者，评级和评论。有没有办法这样做？

Answer 1

FormGroup是包含value的对象，该对象是包含formControl属性的对象

访问invidiual值

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

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

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