无法将表格数据从html（view）传递到angular2中的相关组件

Question

Error:

EXCEPTION: Uncaught (in promise): Error: Error in app/search/search.component.html:10:35 caused by: Cannot read property 'searchFor' of undefined

I have this html file from which I need to create a object called 'chemical' which will have two properties: 1)searchFor (coming from text input) 2) searchBy (coming from dropdown menu) as shown below:

<div class="container">
<div class="row">
    <div class="col-sm-12 bevisible">
        <h3>Search for chemical entries</h3>
    </div>
</div>
<form>
    <div class="form-group row">
        <label for="searchFor" class="col-sm-2 col-form-label">Search For</label>
        <div class="col-sm-10">
            <input type="text" [(ngModel)]="chemical.searchFor"
                   name="searchbox"
                   class="form-control" id="searchFor"
                   placeholder="Search an Entry...">
        </div>
    </div>
    <div class="form-group row">
        <label for="searchType" class="col-sm-2 col-form-label">Search by</label>
        <div class="col-sm-10">
            <select class="custom-select" id="searchType" [(ngModel)]="chemical.searchBy" name="searchdropdown">
                <option selected>Search type</option>
                <option value="1">Reagent Barcode</option>
                <option value="2">Catalog#</option>
                <option value="3">Bottle Label</option>
                <option value="3">Location Barcode</option>
            </select>
        </div>
    </div>
    <div class="form-group row">
        <div class="offset-sm-2 col-sm-10">
            <button type="submit" (click)="getChemicalEntries(chemical)" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

After the chemical object is created, I want to pass it to getChemicalEntries(chemical) function defined on the component end.

This is the associated component:

import {Component, Input} from '@angular/core';
import {SearchService} from '../services/searchservice.component';
import {Chemical} from "../chemical";

@Component({
    selector: 'bioshoppe-search',
    providers:[SearchService],
    templateUrl: 'app/search/search.component.html',
    styleUrls: ['../../css/search.component.css', '../../css/style.css']
})

export class SearchComponent {
    @Input () chemical : Chemical;
    public chemicals;
    public error;

    constructor(private searchService: SearchService) {
    };

    // ngOnInit() {
    //     this.getChemicals();
    // }

    getChemicals() {
        this.searchService
            .getChemicalEntries()
            .subscribe(
                // the first argument is a function which runs on success
                data => {
                    this.chemicals = data
                },
                // the second argument is a function which runs on error
                err => {
                    console.error(err), this.error = true
                },
                // the third argument is a function which runs on completion
                () => console.log("done loading chemicals")
            );
    }
}

PS: I am new to Angular2. Have experience with Angular 1.4.

Answer 1

This is actually a simple JavaScript error. You are trying to access searchFor property of chemical object from your template. But the chemical object is undefined when the template first try to access its property and that's why you are getting the error. To solve this you just need to assign an empty or default object to 'chemical'. For example:

@Input() chemical: Chemical = {
  searchFor: '',
  searchBy: ''
};

The bellow will also work fine but the above one is best practice for TypeScript.

@Input() chemical: any = {}