Angular form change event with material components

I have a form that contains inputs and material components (like mat-select or mat-checkbox).

Each time a modification is made by the user, I want to persist them to the DB. So I did something like <form (change)="save()">.

This is working flawlessly for the native inputs, but it doesn't fire when the user changes a material component value.

I'd rather avoid solutions like using <mat-select (selectionChange)="save()"> on every component, as I could easily forget to add it when I'll have to update my form.

Edit

This is a template driven form. My template is as follow:

<form (change)="save()">

    <!-- Will trigger save -->

    <mat-form-field class="col">

        <input matInput placeholder="Name" name="name" [(ngModel)]="item.name">

    </mat-form-field>



    <!-- Will NOT trigger save -->

    <mat-form-field class="col">

        <mat-select placeholder="Category" name="category [(ngModel)]="item.category.id">

            <mat-option *ngFor="let category of categories" [value]="category.id">{{category.name}}</mat-option>

        </mat-select>

    </mat-form-field>



    <!-- ... -->

</form>

The component code has nothing particular, only the model variable (item: Item;).

edited Nov 20 '18 at 16:35

asked Nov 20 '18 at 15:56

Sébastien

554723

Can you show your component code? E.g. are you using reactive/template-driven forms?

– Daniil Andreyevich Baunov
Nov 20 '18 at 15:59

1

@DaniilAndreyevichBaunov, I updated my question.

– Sébastien
Nov 20 '18 at 16:35

If a template driven form is not required then you could consider converting to a Reactive form. Which would allow you to subscribe to the change event on the form itself in your component.ts code instead of having a bunch of event handlers in your HTML. Here is a link to the docs if you're interested Reactive Forms - valueChanges

– Narm
Nov 20 '18 at 16:47

I don't really see the advantage of using reactive forms as it seems to me like code duplication (as my model object already exists) and a breach in the SoC (as the code behind shouldn't be aware of what's on the template). I really don't understand the problem as, for exemple, mat-select has a 2-way binding [()] and should, as a consequence, fire the change event, right?

– Sébastien
Nov 20 '18 at 17:23

add a comment |

I have a form that contains inputs and material components (like mat-select or mat-checkbox).

Each time a modification is made by the user, I want to persist them to the DB. So I did something like <form (change)="save()">.

This is working flawlessly for the native inputs, but it doesn't fire when the user changes a material component value.

I'd rather avoid solutions like using <mat-select (selectionChange)="save()"> on every component, as I could easily forget to add it when I'll have to update my form.

Edit

This is a template driven form. My template is as follow:

<form (change)="save()">

    <!-- Will trigger save -->

    <mat-form-field class="col">

        <input matInput placeholder="Name" name="name" [(ngModel)]="item.name">

    </mat-form-field>



    <!-- Will NOT trigger save -->

    <mat-form-field class="col">

        <mat-select placeholder="Category" name="category [(ngModel)]="item.category.id">

            <mat-option *ngFor="let category of categories" [value]="category.id">{{category.name}}</mat-option>

        </mat-select>

    </mat-form-field>



    <!-- ... -->

</form>

The component code has nothing particular, only the model variable (item: Item;).

edited Nov 20 '18 at 16:35

asked Nov 20 '18 at 15:56

Sébastien

554723

Can you show your component code? E.g. are you using reactive/template-driven forms?

– Daniil Andreyevich Baunov
Nov 20 '18 at 15:59

1

@DaniilAndreyevichBaunov, I updated my question.

– Sébastien
Nov 20 '18 at 16:35

If a template driven form is not required then you could consider converting to a Reactive form. Which would allow you to subscribe to the change event on the form itself in your component.ts code instead of having a bunch of event handlers in your HTML. Here is a link to the docs if you're interested Reactive Forms - valueChanges

– Narm
Nov 20 '18 at 16:47

I don't really see the advantage of using reactive forms as it seems to me like code duplication (as my model object already exists) and a breach in the SoC (as the code behind shouldn't be aware of what's on the template). I really don't understand the problem as, for exemple, mat-select has a 2-way binding [()] and should, as a consequence, fire the change event, right?

– Sébastien
Nov 20 '18 at 17:23

add a comment |

I have a form that contains inputs and material components (like mat-select or mat-checkbox).

Each time a modification is made by the user, I want to persist them to the DB. So I did something like <form (change)="save()">.

This is working flawlessly for the native inputs, but it doesn't fire when the user changes a material component value.

I'd rather avoid solutions like using <mat-select (selectionChange)="save()"> on every component, as I could easily forget to add it when I'll have to update my form.

Edit

This is a template driven form. My template is as follow:

<form (change)="save()">

    <!-- Will trigger save -->

    <mat-form-field class="col">

        <input matInput placeholder="Name" name="name" [(ngModel)]="item.name">

    </mat-form-field>



    <!-- Will NOT trigger save -->

    <mat-form-field class="col">

        <mat-select placeholder="Category" name="category [(ngModel)]="item.category.id">

            <mat-option *ngFor="let category of categories" [value]="category.id">{{category.name}}</mat-option>

        </mat-select>

    </mat-form-field>



    <!-- ... -->

</form>

The component code has nothing particular, only the model variable (item: Item;).

edited Nov 20 '18 at 16:35

asked Nov 20 '18 at 15:56

Sébastien

554723

I have a form that contains inputs and material components (like mat-select or mat-checkbox).

Each time a modification is made by the user, I want to persist them to the DB. So I did something like <form (change)="save()">.

This is working flawlessly for the native inputs, but it doesn't fire when the user changes a material component value.

I'd rather avoid solutions like using <mat-select (selectionChange)="save()"> on every component, as I could easily forget to add it when I'll have to update my form.

Edit

This is a template driven form. My template is as follow:

<form (change)="save()">

    <!-- Will trigger save -->

    <mat-form-field class="col">

        <input matInput placeholder="Name" name="name" [(ngModel)]="item.name">

    </mat-form-field>



    <!-- Will NOT trigger save -->

    <mat-form-field class="col">

        <mat-select placeholder="Category" name="category [(ngModel)]="item.category.id">

            <mat-option *ngFor="let category of categories" [value]="category.id">{{category.name}}</mat-option>

        </mat-select>

    </mat-form-field>



    <!-- ... -->

</form>

The component code has nothing particular, only the model variable (item: Item;).

angular forms angular-material onchange

edited Nov 20 '18 at 16:35

asked Nov 20 '18 at 15:56

Sébastien

554723

edited Nov 20 '18 at 16:35

asked Nov 20 '18 at 15:56

Sébastien

554723

edited Nov 20 '18 at 16:35

asked Nov 20 '18 at 15:56

Sébastien

554723

asked Nov 20 '18 at 15:56

Sébastien

554723

asked Nov 20 '18 at 15:56

Sébastien

554723

Can you show your component code? E.g. are you using reactive/template-driven forms?

– Daniil Andreyevich Baunov
Nov 20 '18 at 15:59

1

@DaniilAndreyevichBaunov, I updated my question.

– Sébastien
Nov 20 '18 at 16:35

If a template driven form is not required then you could consider converting to a Reactive form. Which would allow you to subscribe to the change event on the form itself in your component.ts code instead of having a bunch of event handlers in your HTML. Here is a link to the docs if you're interested Reactive Forms - valueChanges

– Narm
Nov 20 '18 at 16:47

I don't really see the advantage of using reactive forms as it seems to me like code duplication (as my model object already exists) and a breach in the SoC (as the code behind shouldn't be aware of what's on the template). I really don't understand the problem as, for exemple, mat-select has a 2-way binding [()] and should, as a consequence, fire the change event, right?

– Sébastien
Nov 20 '18 at 17:23

add a comment |

Can you show your component code? E.g. are you using reactive/template-driven forms?

– Daniil Andreyevich Baunov
Nov 20 '18 at 15:59

1

@DaniilAndreyevichBaunov, I updated my question.

– Sébastien
Nov 20 '18 at 16:35

If a template driven form is not required then you could consider converting to a Reactive form. Which would allow you to subscribe to the change event on the form itself in your component.ts code instead of having a bunch of event handlers in your HTML. Here is a link to the docs if you're interested Reactive Forms - valueChanges

– Narm
Nov 20 '18 at 16:47

I don't really see the advantage of using reactive forms as it seems to me like code duplication (as my model object already exists) and a breach in the SoC (as the code behind shouldn't be aware of what's on the template). I really don't understand the problem as, for exemple, mat-select has a 2-way binding [()] and should, as a consequence, fire the change event, right?

– Sébastien
Nov 20 '18 at 17:23

Can you show your component code? E.g. are you using reactive/template-driven forms?

– Daniil Andreyevich Baunov
Nov 20 '18 at 15:59

@DaniilAndreyevichBaunov, I updated my question.

– Sébastien
Nov 20 '18 at 16:35

If a template driven form is not required then you could consider converting to a Reactive form. Which would allow you to subscribe to the change event on the form itself in your component.ts code instead of having a bunch of event handlers in your HTML. Here is a link to the docs if you're interested Reactive Forms - valueChanges

– Narm
Nov 20 '18 at 16:47

I don't really see the advantage of using reactive forms as it seems to me like code duplication (as my model object already exists) and a breach in the SoC (as the code behind shouldn't be aware of what's on the template). I really don't understand the problem as, for exemple, mat-select has a 2-way binding [()] and should, as a consequence, fire the change event, right?

– Sébastien
Nov 20 '18 at 17:23

add a comment |

1 Answer
1

active

oldest

votes

you can still wrap a
<form (change)="save()" [formGroup]="form"> around it

then use a <mat-form-field> around your other mat components. it should listen on the formgroup. The components can get an identifyer with formControlName=""

answered Nov 20 '18 at 16:15

Nikolai Kiefer

19919

I updated my question, I'm using a template-driven form.

– Sébastien
Nov 20 '18 at 16:37

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396839%2fangular-form-change-event-with-material-components%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

you can still wrap a
<form (change)="save()" [formGroup]="form"> around it

then use a <mat-form-field> around your other mat components. it should listen on the formgroup. The components can get an identifyer with formControlName=""

answered Nov 20 '18 at 16:15

Nikolai Kiefer

19919

I updated my question, I'm using a template-driven form.

– Sébastien
Nov 20 '18 at 16:37

add a comment |

you can still wrap a
<form (change)="save()" [formGroup]="form"> around it

then use a <mat-form-field> around your other mat components. it should listen on the formgroup. The components can get an identifyer with formControlName=""

answered Nov 20 '18 at 16:15

Nikolai Kiefer

19919

I updated my question, I'm using a template-driven form.

– Sébastien
Nov 20 '18 at 16:37

add a comment |

you can still wrap a
<form (change)="save()" [formGroup]="form"> around it

then use a <mat-form-field> around your other mat components. it should listen on the formgroup. The components can get an identifyer with formControlName=""

answered Nov 20 '18 at 16:15

Nikolai Kiefer

19919

you can still wrap a
<form (change)="save()" [formGroup]="form"> around it

then use a <mat-form-field> around your other mat components. it should listen on the formgroup. The components can get an identifyer with formControlName=""

answered Nov 20 '18 at 16:15

Nikolai Kiefer

19919

answered Nov 20 '18 at 16:15

Nikolai Kiefer

19919

answered Nov 20 '18 at 16:15

Nikolai Kiefer

19919

answered Nov 20 '18 at 16:15

Nikolai Kiefer

19919

I updated my question, I'm using a template-driven form.

– Sébastien
Nov 20 '18 at 16:37

add a comment |

I updated my question, I'm using a template-driven form.

– Sébastien
Nov 20 '18 at 16:37

I updated my question, I'm using a template-driven form.

– Sébastien
Nov 20 '18 at 16:37

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu