Home / Questions / 254193
Accepted
hubman
Asked: 2020-04-13 15:05:29 +0800 CST 2020-04-13 15:05:29 +0800 CST

Pass data from html to component

  • 772

i have this html

<div class="horizontal">
    <div>
        <span>  <input type="text" maxlength="100" placeholder="titulo" name="name">   </span>
        <span>  <input type="date" name="date">   </span>
    </div>

    <span> <input type="button" id="send" name="more" (click)="saveBooks(name.value, date.value)" value="Send"></span>
    <!-- (click)="changeList(true) -->
</div>

and in the angular component I have

async saveBooks(name, date){
        console.log('DATE ', name, date);
    }

I get the following error:

ERROR TypeError: Cannot read property 'value' of undefined
    at Object.eval [as handleEvent] (DatasComponent.html:22)
    at handleEvent (core.js:23107)
angular

1 Answers

  1. Best Answer

    It is not necessary to send data from parameter, you must use ng.model

    I leave you an example

    in the .html

    <span>  <input type="text" maxlength="100" placeholder="titulo" name="book" [(ngModel)]="valueBook">   </span>
<span>  <input type="date" name="date" [(ngModel)]="valueDate">   </span>

    in the .component

    private valueBook: string;
private valueDate: string;
async saveBooks(){
        console.log( this.valueBook, this.valueDate);
}

    That way the variables valueBookand valueDatethe view are bound to the component

    • 2