如何以 Angular 形式获取下拉选项的值

Question

我正在创建自定义表单。我创建了一个自定义表单：

<form (ngSubmit)="onSubmit(contactForm)" #contactForm="ngForm">
  ....email input filed
  <label class="label" for="experience">How did you find the booking experience?</label>
  <select id="experience" #experience="ngModel"[ngModelOptions]="{standalone: true}">
        <option selected>Choose...</option>
        <option value="excellent">Excellent</option>
        <option value="verygood">Very good</option>
        <option value="good">Good</option>
        <option value="fair">Fair</option>
        <option value="poor">Poor</option>
      </select>
    <button type="submit " value="Send ">Send</button>
</form>

这是打字稿：

  onSubmit(contactForm: NgForm) {
    console.log("called");
    if (contactForm.valid) {
      const email = contactForm.value;
      const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
      this.http.post('https://formspree.io/f/xnqolzjd',
        { replyto: email.email, experience: email.experience },
        { 'headers': headers }).subscribe(
          response => {
            console.log(response);
          }
        );
    }
  }

但是我的experience: email.experience对象里面是空白的。当我在对象本身中硬编码一些值时，它会起作用。 replyto: email.email 正在获取正确的值。请帮忙。

Answer 1

当我们将 ngModelOptions 设置为独立时，它不会注册到父表单，这就是为什么你得到空对象。尝试将独立设置为 false 并尝试

<form (ngSubmit)="onSubmit(contactForm)" #contactForm="ngForm">
  ....email input filed
  <label class="label" for="experience">How did you find the booking experience?</label>
  <select id="experience" name="experience" #experience="ngModel" [ngModelOptions]="{standalone: false}">
        <option selected>Choose...</option>
        <option value="excellent">Excellent</option>
        <option value="verygood">Very good</option>
        <option value="good">Good</option>
        <option value="fair">Fair</option>
        <option value="poor">Poor</option>
      </select>
    <button type="submit " value="Send ">Send</button>
</form>

如何以 Angular 形式获取下拉选项的值

How to fetch value of a Dropdown option in Angular form

free

typescript

angular