1

我被困在从我今天部署在我的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 中的变量中？

4

3 回答 3

2

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

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

对于 html

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

然后当你调用提交

this.contactType[this.rForm.get('select').value];
于 2017-08-07T19:00:41.290 回答
1

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

于 2017-08-07T19:15:35.443 回答
0

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

于 2017-08-07T20:41:00.113 回答