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

Question

我今天无法访问我在 contact.component 中部署的枚举中的选定值。它是表格的一部分。这是我实现枚举的方式：

contact.component.ts (extract of relevant code only)

    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 class 联系人组件如下：

contact.component.html (extract of relevant code only)

  <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 上的联系表单中非常整齐地将枚举显示为下拉列表。我遇到的问题是所选值，我似乎无法访问在下拉列表中选择的值并将其添加到单击提交按钮时显示的模板（post 提交）中。在 Angular 4.3 中，是否有一种方法 .Selected() 可以与枚举一起使用以将他选择的值放入变量中？

Answer 1

看起来您正在使用 ReactiveForms，但是您没有 FormControl 来保存您的 select.

的值

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

对于html

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

然后当你调用提交时

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

Answer 2

您需要使用 formControlName 或 2 方式绑定 [(ngModel)]

Answer 3

字符串枚举是在 TypeScript 2.4 中引入的。据我所知，Angular 仍然不支持 2.4。

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

Angular 4.3 - Correct Way to Implement an Enum in a child component?

html

angular

enums

angular4-forms