angular 2 template doesnt recognize template reference variables

Question

I am working on building a site with Angular 2 and am having some problems with template reference variables. I am creating a pretty straightforward form to add a new listing to an online store:

<div class="row">
<div class="col-sm-6">
  <div class="form-group">
    <label for="productSKU">Product SKU</label>
    <input #productSKU type="text" class="form-control" id="productSKU" placeholder="Enter Product SKU">
  </div>
  <div class="form-group">
    <label for="productTitle">Product Title</label>
    <input type="text" class="form-control" id="productTitle" placeholder="Enter Product Title" #productTitle>
  </div>
  <div class="form-group">
    <label for="productSubtitle">Product Subtitle</label>
    <input type="text" class="form-control" id="productSubtitle" placeholder="Enter Product Subtitle" #productSubtitle>
  </div>
  <div class="form-group">
    <label for="productPrice">Product Price (USD)</label>
    <input type="text" class="form-control" id="productPrice" placeholder="Enter Product Price" #productPrice>
  </div>
  <div class="form-group">
    <label for="productType">Select Product Type</label>
    <select multiple class="form-control" id="productType" #productType>
      <option *ngFor="let type of listingTypes" [value]="type">{{type}}</option>
    </select>
  </div>
</div>
<div class="col-sm-6">
  <div class="form-group">
    <label for="productDescription">Product Description</label>
    <textarea class="form-control" id="productDescription" rows="8" #productDescription></textarea>
  </div>
  <div class="form-group">
    <label for="productCondition">Product Condition</label>
    <input type="text" class="form-control" id="productCondition" placeholder="Enter Product Condition" #productCondition>
  </div>
  <div class="form-group">
    <label for="storageLocation">Storage Location</label>
    <input class="form-control" id="storageLocation" placeholder="Enter Storage Location" #storageLocation>
  </div>
  <div class="form-group">
    <label for="image1Path">Image 1</label>
    <input type="text" class="form-control" name="image1Path" id="image1Path" placeholder="Enter Image 1 File Name" #image1Path>
  </div>
  <button class="btn" id="newPostSubmitButton" (click)="onNewListingSubmit(productTitle.value,
                                                                            productSubtitle.value,
                                                                            productType.value,
                                                                            productPrice.value,
                                                                            productDescription.value,
                                                                            productCondition.value,
                                                                            productSKU.value,
                                                                            storageLocation.value,
                                                                            image1Path.value)">Submit</button>
</div>

For some reason when I try to trigger the onNewListingSubmit method in the component on the submit button click, it is giving me the following error:

As you can see, it can't find the property "value" of undefined. It seems to not be recognizing the various template reference variables throughout the form (eg #productSKU, #productPrice, etc.)

Any ideas why this might be happening? Can't seem to find any other examples of the same problem. Thanks

Answer 1

看起来productCondition未在模板上定义。

Answer 2

Since you use textarea element. There's no direct property value in textarea . At least its value defined for the collection of elements in textarea .