Question

我从今天部署在contact.component中的枚举中访问所选值时遇到了困难。它是表格的一部分。以下是我实现枚举的方法：

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中的变量？

Answer 1

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

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中引入的。 AFAIK，Angular仍然不支持2.4。

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

3 个答案: