如何在 ngForm 中添加/获取来自"子"指令的值？

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>"儿童"指令指向以下代码：

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

如何获得<select-inputs-brand>中可用的选项 我的carForm对象中的指令？

如果需要额外的澄清，请告诉我。

预先感谢Roger A L

Answer 1

在您的 select-inputs-brand's打字率代码中，您声明具有选项的成员变量：

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>