Question

正如我在标题中所说，我无法从表单中获取任何值，更具体地说是select>option输入。

我已经看到过这样的其他问题，但它们已经过时了，大多数人都说这是一个错误。因此，我正在验证它是否仍然是一个错误，现在如何实现这一目标。

我有一个从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的值，则应该返回所选对象的ID，但它会返回一个空字符串。

Answer 1

我相信您需要在选择字段中添加表单控件。看起来像是：

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

模板引用变量将允许您从Component访问该DOM元素，但不适用于表单。

我建议您阅读http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/以获取更多信息。

编辑：我注意到你在ngOnInit中有表单构建器组。除非你需要ngOnInit中的formBuilder，否则我建议你把它移到你的构造函数中。

Answer 2

我认为您需要#id而不是name="id"

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

for formbuilder能够建立连接。

Answer 3

您需要将其与对象

绑定

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

我可以看到你正在使用模型驱动的表单，如果你不进行单元测试，你真的不需要这样做：

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); 
    }
}

如何使用ngValue从select＆gt;选项中获取数据

3 个答案: