Passing a variable as a parameter in HTML

Question

I'm trying to call a function which nulls the field clicked,

if I write (focus)="this.element.task=null" , it works but if I do (focus)="resetFields(this.element.task)" is there a way to achieve this?

resetFields method:

resetFields(elm) {
    elm = NULL;
    this.submitted = false;
}

Sample on Stackblitz: http://stackblitz.com/edit/angular-nvgtec

i guess you should try `(focus)="resetFields(element.task)"` — Mohamed Ali RACHID, Nov 06 '18 at 15:26
What's happening when you try to call it? What error-messages are being produced on the console? I immediately notice that you said that `resetFields` is a *method* ... but it looks like a function to me. — Mike Robinson, Nov 06 '18 at 15:27
What @MohamedAliRACHID is true, your stackblitz says `onfocus=...` should instead be `(focus)=...` — Aviad P., Nov 06 '18 at 15:43
in your stackBlitz link it is working with `` , with `(focus)` not `(onfocus)` — Mohamed Ali RACHID, Nov 06 '18 at 15:44

Ludevik · Accepted Answer · 2018-11-06T16:07:40.360

Javascript is pass by value, only for objects the value is the reference to that object. See this question.

So the answer to your original question is no. You cannot modify something inside the function and see the results outside the function as the changes are visible in current function scope. You can only send object to that function and modify that object.

resetFields(elm) {
    elm = NULL;  //won't work, will only set reference to elm to null inside resetFields function scope
    elm.someProperty = null; //will work
}

You could however do it like this:

resetFields(elm, property) {
    elm[property] = null;
}

(focus)="resetFields(this.element, 'task')"

Updated stackblitz demo.

SiddAjmera · Answer 2 · 2018-11-06T15:55:34.760

0

Try (focus) instead of onfocus this:

<input [(ngModel)]="name" (focus)="resetFields()">

Since you're binding to name via [(ngModel)], changing name in your Component will also change your template.

edited Nov 06 '18 at 15:55

answered Nov 06 '18 at 15:43

SiddAjmera

38,129
5
72
110

score 0 · Answer 3 · answered Nov 06 '18 at 15:51

0

If you are using reactive forms then ...

this.form.reset(); // it will reset all data to blank

If you are using ngModel then

<input name="name" [(ngModel)]="form.name" (focus)="resetData()">

resetData(){
   this.form = {};
}

answered Nov 06 '18 at 15:51

Sachin Shah

4,503
3
23
50

Marshal · Answer 4 · 2018-11-06T16:07:33.867

You are data binding to a variable in your component called name via ngModel, and then passing the same variable back to the component from the template/UI as an argument to the method resetFields(name: any)

<input [(ngModel)]="name" (focus)="resetFields(name)">

Because you are passing a "copy" of name from the teamplate/UI as an argument to your method resetFields, it is in fact modifying that copy of name, but it does not alter the original that ngModel is using... and because you never do anything with the argument after you modify it... it does not work.

 resetFields(name: any) {
    console.log(name);
    name = null;
    console.log(name);
  }

This is why modifying the component variable works as you are modifiying the original copy that ngModel is data binding to.

resetFields() {
    this.name = null;
  }

Passing a variable as a parameter in HTML

4 Answers4