Angular 4.3 - 在子组件中实现枚举的正确方法?
我被卡在今天部署在我的contact.component中的枚举值中。它是一种形式的一部分。这里是我是如何实现的枚举:Angular 4.3 - 在子组件中实现枚举的正确方法?
contact.component.ts(只有相关的代码提取物)
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
//emum for contact list type
export enum ContactType {
'Select-One',
'Information-Request',
'Suggestion',
'CustomerService-Request',
'Quotation-Request',
'Complaint',
'UrgentCallback-Request'
}
...
export class ContactComponent implements OnInit {
//form property declarations
rForm: FormGroup;
post: any;
keys: any[]; //for enum
//variable declarations
contactType = ContactType; //for enum - assignment from above nested enum class
...
//use Constructor to specify form validation
constructor(private formBuilder:FormBuilder) {
//enum first then string fields
this.keys = Object.keys(this.contactType).filter(Number);
...
//method to post submitted contact form (here is where the back end service call is made to db)
addPost(post) {
this.contactType = post.contactType;
...
所以我对接触组件的HTML类如下:
contact.component.html(仅提供相关代码)
<div *ngIf="!firstName; else forminfo">
<fieldset>
<form id="online_contact_form" [formGroup]="rForm" (ngSubmit)=addPost(rForm.value)>
<div class="form-container">
<div class="row">
<h2>Online Contact Form</h2>
<!--Contact Type (Enum)-->
<p>
<label id="contactType">Contact Type:</label>
<select>
<option *ngFor="let key of keys" [value]="key">{{ contactType[key] }}</option>
</select>
</p>
<!--First Name-->
<p>
<label>First Name: <input type="text" formControlName="firstName" placeholder="Given/First Name here"></label>
</p>
<div class = "alert" *ngIf="!rForm.controls['firstName'].valid && rForm.controls['firstName'].touched">
{{ alertFirstName }}
</div>
<!--Last Name-->
...
<!--Template for form information-->
<ng-template #forminfo>
<div class="form-container">
<div class="row">
<h3>Many Thanks - Messsage is Sent - Details Are:</h3>
<h4>{{ contactType }}</h4>
<h4>First Name: {{ firstName }}</h4>
<h4>Last Name: {{ lastName }}</h4>
<h4>Email Address: {{ email }}</h4>
<h4>Contact Number: {{ contactNumber }}</h4>
<p>Comment: <br>{{ comment }}</p>
</div>
</div>
</ng-template>
因此,上面的样式代码在Chrome,Safari和Firefix上的联系表单中非常整洁地显示了枚举作为下拉列表。我遇到的问题是选定的值,我似乎无法访问在下拉列表中选择的值,并将其添加到模板中(提交后),该模板会在点击提交按钮时显示。有没有一种方法.Selected(),我可以使用枚举来让他在Angular 4.3中选择一个变量的值?
看起来您正在使用ReactiveForms,但您没有FormControl
来保存您选择的值。
this.rForm = this.formBuilder.group({
'select': []
...
});
对于HTML
<select formControlName="select">
...
</select>
然后当你调用提交
this.contactType[this.rForm.get('select').value];
您需要使用formControlName或2路结合[(ngModel)
字符串枚举在TypeScript 2.4中引入。 AFAIK,Angular仍然不支持2.4。
感谢雅科夫的信息..我得到了上述工作,但它是一个真正的麻烦...一个专门的enumHelperClass()包括字符串枚举是需要Angular我认为..字符串枚举太有用,不适合在在我看来的框架级别。 ASP.NET在Razor中为Enum处理后置MVC 5.1提供了一个很好的类,例如, @Html。 EnumDropDownListFor(...) –
你打赌克里斯..我尝试了一百万的方式来让它工作,并知道(像往常一样..大声笑)它会回到一两行代码......我通过submited枚举类型'这个。 contactType [this.rForm.get('select')。value];'转换为字符串值并将其传递给post对象,并且它可以工作!还加上了'formControlName',因为我昨天已经拿出了一百万次,并将其恢复。 –
Enum现在适用于Chrome,Safari和Firefox,但在Chrome和Firefox中默认的“Select-One”值不会显示为默认下拉值。如果在完成前端之后Ive时间,将会重新访问这个..感谢你们帮助兄弟!非常感激! –