在 Angular 中同时实时显示反应式表单元素
Display Reactive form elements concurrently real-time in Angular
我无法弄清楚如何在用户 entered/inputted 时同时显示表单 elements/values。我希望在用户仍在键入且尚未按下提交按钮时显示它们。
json 管道允许我显示所有元素,但我不知道如何在 HTML 代码中显示单个元素。
{{commentForm.value | json}}
我可以使用上面的 JSON 管道访问所有元素,但我想访问单个元素。
示例 Angular 下面的响应式表单代码。
<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>
我想单独显示作者、评分和评论。有什么办法吗?
FormGroup
is a object that contains value
这是一个包含你的 formControl
属性的对象
访问单个值
<p>{{commentForm.value.author}}</p>
<p>{{commentForm.value.rating}}</p>
<p>{{commentForm.value.comment}}</p>
我无法弄清楚如何在用户 entered/inputted 时同时显示表单 elements/values。我希望在用户仍在键入且尚未按下提交按钮时显示它们。
json 管道允许我显示所有元素,但我不知道如何在 HTML 代码中显示单个元素。
{{commentForm.value | json}}
我可以使用上面的 JSON 管道访问所有元素,但我想访问单个元素。
示例 Angular 下面的响应式表单代码。
<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>
我想单独显示作者、评分和评论。有什么办法吗?
FormGroup
is a object that contains value
这是一个包含你的 formControl
属性的对象
访问单个值
<p>{{commentForm.value.author}}</p>
<p>{{commentForm.value.rating}}</p>
<p>{{commentForm.value.comment}}</p>