Блог

Главная - Вопросы по программированию - Как получить значение выпадающего параметра в угловой форме

Как получить значение выпадающего параметра в угловой форме

#angular #typescript #free

#angular #typescript #Бесплатно

Вопрос:

Я создаю пользовательскую форму. Я создал пользовательскую форму:

 <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>

вот typescript:

   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 в объекте my пусто. Это работает, когда я жестко кодирую некоторое значение в самом объекте. replyto: email.email извлекается правильное значение. Пожалуйста, помогите.

Ответ №1:

когда мы устанавливаем для ngModelOptions значение standalone, оно не будет регистрироваться в родительской форме, поэтому вы получаете пустой объект. Попробуйте установить для standalone значение 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>

Комментарии:

1. Что, если просто удалить его вместо того, чтобы делать его ложным. Я добавил его, потому что получал эту ошибку на консоли: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

2. Это также подходит для вашей ссылки, я установил false, да, вы должны установить атрибут name для элемента управления формой.

3. Теперь я напишу модульные тестовые примеры. Возможно, мы захотим возобновить это обсуждение.

Метки: