如何从 ngForm 中的 'child' 指令 add/get 值？

Question

具有以下代码：

<form #carForm="ngForm" (ngSubmit)="createCar(carForm)">
        <div class="form-group">
          <label for="inputCarName">Car Name</label>
          <input [(ngModel)]="name" name="name" type="text">
        </div>
        <div class="form-group">
          <label for="inputPrice">Price</label>
          <input [(ngModel)]="price" name="price" type="number">
        </div>
        <select-inputs-brand></select-inputs-brand>
</form>

<select-inputs-brand>"child"指令指向以下代码：

<div class="form-group">
  <label for="brandSelect1">Select Brand:</label>
  <select multiple class="form-control" id="brandSelect2">
    <option>Fird</option>
    <option>GM</option>
    <option>Audi</option>
  </select>
</div>

How can I get the options available in <select-inputs-brand> directive in my carForm object?

如果需要额外说明，请告诉我。

提前致谢，罗杰·艾尔

Answer 1

在您的 select-inputs-brand 打字稿代码中，您使用以下选项声明了一个成员变量：

class SelectInputsBrand {
    public options: string[]
    constructor() {
        this.options = ['Ford', 'GM', 'Audi']
    }
}

在指令的 html 中，您将这些选项绑定到 UI 中的下拉列表：

<select multiple class="form-control" id="brandSelect2">
    <option *ngFor="let o of options">{{ o }}</option>
</select>

在 carForm 的打字稿代码中，您声明了一个成员变量，它将保存指令的实例：

import { ViewChild } from '@angular/core'
import { SelectInputsBrand } from 'wherever/it/is/placed'

export class CarForm {
    @ViewChild('myDropdown') private myDropdown: SelectInputsBrand;

    someFunction() {
        let whatYouNeed = this.myDropdown.options <-- this will give you the options.
    }
}

在 carForm 的 html 中，您为指令指定一个 ID：

<select-inputs-brand #myDropdown></select-inputs-brand>

如何从 ngForm 中的 'child' 指令 add/get 值？

How do I add/get values from a 'child' directive in a ngForm?

angular2-forms

angular2-directives

angular