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中选择一个变量的值？

来源

2017-08-07 John Mulhall

看起来您正在使用ReactiveForms，但您没有FormControl来保存您选择的值。

this.rForm = this.formBuilder.group({ 
    'select': [] 
    ... 
});

对于HTML

<select formControlName="select"> 
    ... 
</select>

然后当你调用提交

this.contactType[this.rForm.get('select').value];

来源

2017-08-07 19:00:41 ChrisG

你打赌克里斯..我尝试了一百万的方式来让它工作，并知道（像往常一样..大声笑）它会回到一两行代码......我通过submited枚举类型'这个。 contactType [this.rForm.get（'select'）。value];'转换为字符串值并将其传递给post对象，并且它可以工作！还加上了'formControlName'，因为我昨天已经拿出了一百万次，并将其恢复。 –

Enum现在适用于Chrome，Safari和Firefox，但在Chrome和Firefox中默认的“Select-One”值不会显示为默认下拉值。如果在完成前端之后Ive时间，将会重新访问这个..感谢你们帮助兄弟！非常感激！ –

您需要使用formControlName或2路结合[（ngModel）

来源

2017-08-07 19:15:35 RRForUI

字符串枚举在TypeScript 2.4中引入。 AFAIK，Angular仍然不支持2.4。

来源

2017-08-07 20:41:00

感谢雅科夫的信息..我得到了上述工作，但它是一个真正的麻烦...一个专门的enumHelperClass（）包括字符串枚举是需要Angular我认为..字符串枚举太有用，不适合在在我看来的框架级别。 ASP.NET在Razor中为Enum处理后置MVC 5.1提供了一个很好的类，例如， @Html。 EnumDropDownListFor（...） –

Angular 4.3 - 在子组件中实现枚举的正确方法？

回答

相关问题