Angular form change event with material components

up vote
1
down vote

favorite

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 at 16:35

asked Nov 20 at 15:56

Sébastien

549722

Can you show your component code? E.g. are you using reactive/template-driven forms?
– Daniil Andreyevich Baunov
Nov 20 at 15:59

1

@DaniilAndreyevichBaunov, I updated my question.
– Sébastien
Nov 20 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 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 at 17:23

add a comment |

up vote
1
down vote

favorite

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 at 16:35

asked Nov 20 at 15:56

Sébastien

549722

Can you show your component code? E.g. are you using reactive/template-driven forms?
– Daniil Andreyevich Baunov
Nov 20 at 15:59

1

@DaniilAndreyevichBaunov, I updated my question.
– Sébastien
Nov 20 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 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 at 17:23

add a comment |

up vote
1
down vote

favorite

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 at 16:35

asked Nov 20 at 15:56

Sébastien

549722

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 at 16:35

asked Nov 20 at 15:56

Sébastien

549722

edited Nov 20 at 16:35

asked Nov 20 at 15:56

Sébastien

549722

edited Nov 20 at 16:35

asked Nov 20 at 15:56

Sébastien

549722

asked Nov 20 at 15:56

Sébastien

549722

asked Nov 20 at 15:56

Sébastien

549722

Can you show your component code? E.g. are you using reactive/template-driven forms?
– Daniil Andreyevich Baunov
Nov 20 at 15:59

1

@DaniilAndreyevichBaunov, I updated my question.
– Sébastien
Nov 20 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 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 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 at 15:59

1

@DaniilAndreyevichBaunov, I updated my question.
– Sébastien
Nov 20 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 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 at 17:23

Can you show your component code? E.g. are you using reactive/template-driven forms?
– Daniil Andreyevich Baunov
Nov 20 at 15:59

@DaniilAndreyevichBaunov, I updated my question.
– Sébastien
Nov 20 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 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 at 17:23

add a comment |

1 Answer
1

active

oldest

votes

up vote
1
down vote

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 at 16:15

Nikolai Kiefer

1859

I updated my question, I'm using a template-driven form.
– Sébastien
Nov 20 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',
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

up vote
1
down vote

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 at 16:15

Nikolai Kiefer

1859

I updated my question, I'm using a template-driven form.
– Sébastien
Nov 20 at 16:37

add a comment |

up vote
1
down vote

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 at 16:15

Nikolai Kiefer

1859

I updated my question, I'm using a template-driven form.
– Sébastien
Nov 20 at 16:37

add a comment |

up vote
1
down vote

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 at 16:15

Nikolai Kiefer

1859

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 at 16:15

Nikolai Kiefer

1859

answered Nov 20 at 16:15

Nikolai Kiefer

1859

answered Nov 20 at 16:15

Nikolai Kiefer

1859

answered Nov 20 at 16:15

Nikolai Kiefer

1859

I updated my question, I'm using a template-driven form.
– Sébastien
Nov 20 at 16:37

add a comment |

I updated my question, I'm using a template-driven form.
– Sébastien
Nov 20 at 16:37

I updated my question, I'm using a template-driven form.
– Sébastien
Nov 20 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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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

搜尋此網誌

Tukukkk