Как получить данные из опции select> с ngValue

Как я уже сказал в заголовке, я не могу получить никаких значений, возвращаемых из формы, а точнее ввода select>option.Как получить данные из опции select> с ngValue

Я видел другие вопросы, подобные этому, но они устарели, и большинство из них говорят, что это была ошибка. Поэтому я проверяю, все ли это ошибка, и как это можно достичь сейчас.

Я объект, возвращаемый из Firebase:

car: { 
    {id: 1, name: 'a'}, 
    {id: 2, name: 'b'}, 
    {id: 3, name: 'c'} 
}

Это HTML код, который я должен работать:

<select #id class = "form-control"> 
    <option *ngFor = "let car of cars" [ngValue] = "car.key">{{ car.name }}</option> 
</select>

И решить в моем компоненте:

ngOnInit() { 
    this.myForm = this.fb.group({ 
    id: ['', Validators.required] 
    }); 
}

Так если бы я получил console.log значение id, это должно вернуть идентификатор selec ted, но возвращает пустую строку.

источник

2016-10-07 RaulGM

Я считаю, что вам нужно будет добавить элемент управления формы в поле выбора. Посмотрел бы, как:

<select [formControl]="id" class="form-control">

Шаблон задающее позволит вам получить доступ к этому DOM элемент из вашего компонента, но не будет работать для форм.

Я бы рекомендовал прочитать http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/ для получения дополнительной информации.

Редактировать: Я заметил, что у вас есть группа разработчиков форм в ngOnInit. Если вам не нужен formBuilder в ngOnInit, я бы рекомендовал переместить его в ваш конструктор.

источник

2016-10-07 02:55:21 SpareWalrus

'' FormBuilder' в ngOnInit() 'должен работать нормально в финале Angular2 (добавлена поддержка для изменения ссылки форму после первого связывания). Как правило, хорошей практикой не иметь никакого кода в конструкторе, если нет конкретной необходимости поставить его там. Меньший код в конструкторе обычно упрощает тестирование класса. –

Не понял, что они добавили это в финал. Тогда проигнорируйте мой комментарий. – SpareWalrus

Я думаю, что вместо #id вам нужно name="id"

<select name="id" class = "form-control">

для formbuilder, чтобы иметь возможность сделать соединение.

источник

2016-10-07 04:53:59

Это не работает, я пробовал каждую комбинацию. Вы проверили это? – RaulGM

Нет, я не проверял. Можете ли вы создать Plunker? Plunker предоставляет готовый к использованию шаблон Angular2. Тогда я могу посмотреть еще раз. –

Не работает. Вы проверили это? Очень хорошая документация, ng-book, но у меня не было ответов, которые я ищу = (. – RaulGM

Вы должны связать его с объектом

<form #f="ngForm" (submit)="onSubmit()"> 
    <label>Name</label> 
    <div> 
     <input [(ngModel)]="user.name" name="user"/> 
    </div> 
    <label>Service</label> 
    <select name="service" [(ngModel)]="user.service"> 
     <option *ngFor='let service of services' [ngValue]='service'>{{service.name}}</option> 
    </select> 
    <button type="submit">Create User</button> 
</form>

Я вижу, что вы используете Model Driven формы, вы реально не нужно, что если вы AINT гона сделать модульное тестирование:

Reference

Вот быстрый способ определения шаблонов форм управляемый: объект

Пользователь:

import { Service } from './service'; 
export User{ 
    name: string, 
    service: Service 
}

пользователя Компонент:

export class UserComponent implements OnInit{ 
    user = User; 
    services = [{...},{...}]; 
    ngOnInit() { 
     this.user = <User>{}; // Initialize empty object, type assertion, with this we loose type safety 
    } 
    onSubmit(){ 
     console.log(this.user); 
    } 
}

источник

2016-10-07 07:50:19

Как получить данные из опции select> с ngValue

ответ

Смежные вопросы