Question

我试图将选项选择的值重新放回到我的组件类中以获取某些逻辑。但是，它返回为未定义，即使我在视图中将[value]="unit"的值硬编码为选项，当我通过它时，onModelChange(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>

或

cm

否则Angular会尝试阅读组件类的inch和ERROR in ./~/babel-core/lib/helpers/resolve.js Module not found: Error: Can't resolve 'module' in '/home/miro_g/Bureau/EVOLT/test2/node_modules/babel-core/lib/helpers' @ ./~/babel-core/lib/helpers/resolve.js 34:14-31 @ ./~/babel-core/lib/transformation/file/index.js @ ./~/babel-core/lib/api/node.js @ ./~/babel-core/index.js @ ./www/js/index.js @ multi webpack/hot/dev-server ./www/js/index.js ERROR in ./~/debug/src/node.js Module not found: Error: Can't resolve 'net' in '/home/miro_g/Bureau/EVOLT/test2/node_modules/debug/src' @ ./~/debug/src/node.js 191:16-30 @ ./~/debug/node.js @ ./~/babel-core/lib/transformation/file/logger.js @ ./~/babel-core/lib/transformation/file/index.js @ ./~/babel-core/lib/api/node.js @ ./~/babel-core/index.js @ ./www/js/index.js @ multi webpack/hot/dev-server ./www/js/index.js成员。

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>

控制器：

app.controller('myCtrl', function($scope) {
    $scope.myunits = [{
    value: 'cent',
    label: 'centimeters'
  }, {
    value: 'inch',
    label: 'inches'
  }]; 
  $scope.update = function() {
    console.log($scope.unitList.label)
  }
});

选中此fiddle

从表单控件访问选项值以在组件模型中使用

2 个答案: