フォームコントロールからオプションの値をアクセスしてコンポーネントモデルで使用する

Question

オプション選択の値を後でロジックのコンポーネントクラスに戻そうとしています。しかし、私はそれが未定義となるonModelChange(unit)を渡すとき、私はオプションとして私のビューで[value]="unit"の値をハードコードしていても、未定義として返します。 基本的に私は自分のフォームグループインスタンスに値を与える必要があるだけでなく、そのフィールドの値を取得して別のフィールドのロジックを実行する必要があります。

ビュー 新ジョブ入力

<div class="card container form-container"> 
<div class="row"> 
    <div class="col-md-12"> 
    <form (ngSubmit)="createJobEntry(job_entry)" 
     #jobEntryForm="ngForm"> 

    <div class="form-group"> 
     <div class="dropdown" dropdown> 
     <label class="label-text" for="material" >Material</label> 
     <select class="form-control" 
        (ngModelChange)="onMaterialChange($event)" 
        required 
        id="material" 
        name="material" 
       [(ngModel)]="job_entry.material" > 
      <option *ngFor=" let m of materials" [ngValue]="m"> {{ 
        m.product_name }} 
      </option> 
     </select> 
     </div> 
    </div> 

<div class="form-group"> 
<label class="form-group" for="unit" >Unit</label> 
    <select class="form-control" id="unit" name="unit" (onModelChange)="onUnitChange(unit)" [(ngModel)]="job_entry.units"> 
    <option [value]="cm">centimeters</option> 
    <option [value]="inch">inches</option> 
    </select> 
</div> 

クラス

job_entry : JobEntry = <JobEntry>{}; 

    ngOnInit() { 

this.job_entry = { 
    id: null , 
    client: '', 
    material: '', 
    size_width: 0 , 
    size_height: 0, 
    units: '', 
    margin: 0, 
    runs: 0, 
    prints: 0, 
    originals: 0, 
    per_print: 0, 
    discount: 0, 
    price: 0 
} 

    onMaterialChange(material) { 
    alert(material.sell_per_sqm) 
    } 

onUnitChange(unit) { 
alert(unit) 
} 

私はまた、コンソールでこれを取得する：

dom_renderer.ts:311 The specified value "undefined" is not a valid 
number. The value must match to the following regular expression: -? 
(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)? 

誰もがここで何が起こっているか理解できますか？

Answer 1

<option [value]="cm">centimeters</option> 
<option [value]="inch">inches</option> 

はおそらく

<option value="cm">centimeters</option> 
<option value="inch">inches</option> 

または

<option [value]="'cm'">centimeters</option> 
<option [value]="'inch'">inches</option> 

する必要がありそうでない角度は、コンポーネントクラスのcmとinchメンバーを読み取ろうとします。

Answer 2

他の選択肢は以下のとおりです。

ビュー：

<div ng-app="myApp" ng-controller="myCtrl"> 

<select ng-model="unitList" ng-change="update()" 
     ng-options="unit as unit.label for unit in myunits">   
</select> 

<p>Selected: {{unitList.label}}</p> 

</div> 

コントローラ：このfiddle