Mixing
Submit in custom Angular button component does not submit form
I have extracted the submit button into a seperate component. Now, the form is not submitted/the submit function is not called anymore as ngSubmit is not triggered.
<form [formGroup]='form' (ngSubmit)='submit(form.value)'>
...
<app-submit-button></app-submit-button>
</form>
The problem is that the button in my custom component app-submit-button triggers a function call on click. The submit event is not further propagated to the parent component and thus its submit function is not executed. However, when I remove (click)='submit()' from the child component, form submit works.
<ng-container [ngSwitch]='state'>
<button *ngSwitchCase='buttonState.Idle' (click)='submit()'
type='submit'>{{idleText}}</button>
...
</ng-container>
I tried it with and without type='submit' on app-submit-button and on the button itself.
I got it working with
<app-submit-button (click)='submit(form.value)'></app-submit-button>
and removing ngSubmit. I would like to know if it is the proper way or if this behaves differently then using ngSubmit.
angular forms typescript events form-submit asked Jan 2 at 11:16
MatthiasSommerMatthiasSommer
585419
add a comment |
I have extracted the submit button into a seperate component. Now, the form is not submitted/the submit function is not called anymore as ngSubmit is not triggered.
<form [formGroup]='form' (ngSubmit)='submit(form.value)'>
...
<app-submit-button></app-submit-button>
</form>
The problem is that the button in my custom component app-submit-button triggers a function call on click. The submit event is not further propagated to the parent component and thus its submit function is not executed. However, when I remove (click)='submit()' from the child component, form submit works.
<ng-container [ngSwitch]='state'>
<button *ngSwitchCase='buttonState.Idle' (click)='submit()'
type='submit'>{{idleText}}</button>
...
</ng-container>
I tried it with and without type='submit' on app-submit-button and on the button itself.
I got it working with
<app-submit-button (click)='submit(form.value)'></app-submit-button>
and removing ngSubmit. I would like to know if it is the proper way or if this behaves differently then using ngSubmit.
angular forms typescript events form-submit asked Jan 2 at 11:16
MatthiasSommerMatthiasSommer
585419
2
Why don't you call submit from within the click function then?
– Can K.
Jan 2 at 11:19
add a comment |
I have extracted the submit button into a seperate component. Now, the form is not submitted/the submit function is not called anymore as ngSubmit is not triggered.
<form [formGroup]='form' (ngSubmit)='submit(form.value)'>
...
<app-submit-button></app-submit-button>
</form>
The problem is that the button in my custom component app-submit-button triggers a function call on click. The submit event is not further propagated to the parent component and thus its submit function is not executed. However, when I remove (click)='submit()' from the child component, form submit works.
<ng-container [ngSwitch]='state'>
<button *ngSwitchCase='buttonState.Idle' (click)='submit()'
type='submit'>{{idleText}}</button>
...
</ng-container>
I tried it with and without type='submit' on app-submit-button and on the button itself.
I got it working with
<app-submit-button (click)='submit(form.value)'></app-submit-button>
and removing ngSubmit. I would like to know if it is the proper way or if this behaves differently then using ngSubmit.
angular forms typescript events form-submit asked Jan 2 at 11:16
MatthiasSommerMatthiasSommer
585419
I have extracted the submit button into a seperate component. Now, the form is not submitted/the submit function is not called anymore as ngSubmit is not triggered.
<form [formGroup]='form' (ngSubmit)='submit(form.value)'>
...
<app-submit-button></app-submit-button>
</form>
The problem is that the button in my custom component app-submit-button triggers a function call on click. The submit event is not further propagated to the parent component and thus its submit function is not executed. However, when I remove (click)='submit()' from the child component, form submit works.
<ng-container [ngSwitch]='state'>
<button *ngSwitchCase='buttonState.Idle' (click)='submit()'
type='submit'>{{idleText}}</button>
...
</ng-container>
I tried it with and without type='submit' on app-submit-button and on the button itself.
I got it working with
<app-submit-button (click)='submit(form.value)'></app-submit-button>
and removing ngSubmit. I would like to know if it is the proper way or if this behaves differently then using ngSubmit.
angular forms typescript events form-submit angular forms typescript events form-submit asked Jan 2 at 11:16
MatthiasSommerMatthiasSommer
585419
asked Jan 2 at 11:16
MatthiasSommerMatthiasSommer
585419
edited Jan 2 at 13:15
MatthiasSommer
asked Jan 2 at 11:16
MatthiasSommerMatthiasSommer
585419
asked Jan 2 at 11:16
MatthiasSommerMatthiasSommer
585419
asked Jan 2 at 11:16
MatthiasSommerMatthiasSommer
585419
585419
2
Why don't you call submit from within the click function then?
– Can K.
Jan 2 at 11:19
add a comment |
2
Why don't you call submit from within the click function then?
– Can K.
Jan 2 at 11:19
2
2
Why don't you call submit from within the click function then?
– Can K.
Jan 2 at 11:19
Why don't you call submit from within the click function then?
– Can K.
Jan 2 at 11:19
add a comment |
1 Answer
1
active
oldest
votes
I think you should not make a different component just for a button. The problem is you can not pass an event from parent to child. both of the submit functions are different since they belong to different classes(one is in parent component and other is in the child). you can either create an event in your app-submit-button component and emit the event on button click.
like this in your app-submit-button typescript file
@Output()
submitEvent = new EventEmitter<>();
submit(): void {
submitEvent.emit();
}
then handle the event in the parent component html file like this
<app-submit-button (submitEvent)="submit(form.value)"></app-submit-button>
It will trigger an event in the child component and parent will act on that event. But still it is bad practice to create a different component just for a submit button. You should use the button directly in form without using a child. I hope this helps. Happy coding ;-)
answered Jan 2 at 11:33
Torab ShaikhTorab Shaikh
11911
I am using a seperate component so I can show different labels and styles on the button, such as "Create", "Creating" with a spinner, and "Created". I want to reuse it throughout my app.
– MatthiasSommer
Jan 2 at 11:34
@MatthiasSommer Oh, If you think it is necessary for you to do this then you can try the event based solution I have provided.
– Torab Shaikh
Jan 2 at 11:40
Isn't there a difference between using (ngSubmit)='submit(form.value)' and calling the submit method directly?
– MatthiasSommer
Jan 2 at 12:42
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54005337%2fsubmit-in-custom-angular-button-component-does-not-submit-form%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think you should not make a different component just for a button. The problem is you can not pass an event from parent to child. both of the submit functions are different since they belong to different classes(one is in parent component and other is in the child). you can either create an event in your app-submit-button component and emit the event on button click.
like this in your app-submit-button typescript file
@Output()
submitEvent = new EventEmitter<>();
submit(): void {
submitEvent.emit();
}
then handle the event in the parent component html file like this
<app-submit-button (submitEvent)="submit(form.value)"></app-submit-button>
It will trigger an event in the child component and parent will act on that event. But still it is bad practice to create a different component just for a submit button. You should use the button directly in form without using a child. I hope this helps. Happy coding ;-)
answered Jan 2 at 11:33
Torab ShaikhTorab Shaikh
11911
I am using a seperate component so I can show different labels and styles on the button, such as "Create", "Creating" with a spinner, and "Created". I want to reuse it throughout my app.
– MatthiasSommer
Jan 2 at 11:34
@MatthiasSommer Oh, If you think it is necessary for you to do this then you can try the event based solution I have provided.
– Torab Shaikh
Jan 2 at 11:40
Isn't there a difference between using (ngSubmit)='submit(form.value)' and calling the submit method directly?
– MatthiasSommer
Jan 2 at 12:42
add a comment |
I think you should not make a different component just for a button. The problem is you can not pass an event from parent to child. both of the submit functions are different since they belong to different classes(one is in parent component and other is in the child). you can either create an event in your app-submit-button component and emit the event on button click.
like this in your app-submit-button typescript file
@Output()
submitEvent = new EventEmitter<>();
submit(): void {
submitEvent.emit();
}
then handle the event in the parent component html file like this
<app-submit-button (submitEvent)="submit(form.value)"></app-submit-button>
It will trigger an event in the child component and parent will act on that event. But still it is bad practice to create a different component just for a submit button. You should use the button directly in form without using a child. I hope this helps. Happy coding ;-)
answered Jan 2 at 11:33
Torab ShaikhTorab Shaikh
11911
I am using a seperate component so I can show different labels and styles on the button, such as "Create", "Creating" with a spinner, and "Created". I want to reuse it throughout my app.
– MatthiasSommer
Jan 2 at 11:34
@MatthiasSommer Oh, If you think it is necessary for you to do this then you can try the event based solution I have provided.
– Torab Shaikh
Jan 2 at 11:40
Isn't there a difference between using (ngSubmit)='submit(form.value)' and calling the submit method directly?
– MatthiasSommer
Jan 2 at 12:42
add a comment |
I think you should not make a different component just for a button. The problem is you can not pass an event from parent to child. both of the submit functions are different since they belong to different classes(one is in parent component and other is in the child). you can either create an event in your app-submit-button component and emit the event on button click.
like this in your app-submit-button typescript file
@Output()
submitEvent = new EventEmitter<>();
submit(): void {
submitEvent.emit();
}
then handle the event in the parent component html file like this
<app-submit-button (submitEvent)="submit(form.value)"></app-submit-button>
It will trigger an event in the child component and parent will act on that event. But still it is bad practice to create a different component just for a submit button. You should use the button directly in form without using a child. I hope this helps. Happy coding ;-)
answered Jan 2 at 11:33
Torab ShaikhTorab Shaikh
11911
I think you should not make a different component just for a button. The problem is you can not pass an event from parent to child. both of the submit functions are different since they belong to different classes(one is in parent component and other is in the child). you can either create an event in your app-submit-button component and emit the event on button click.
like this in your app-submit-button typescript file
@Output()
submitEvent = new EventEmitter<>();
submit(): void {
submitEvent.emit();
}
then handle the event in the parent component html file like this
<app-submit-button (submitEvent)="submit(form.value)"></app-submit-button>
It will trigger an event in the child component and parent will act on that event. But still it is bad practice to create a different component just for a submit button. You should use the button directly in form without using a child. I hope this helps. Happy coding ;-)
answered Jan 2 at 11:33
Torab ShaikhTorab Shaikh
11911
answered Jan 2 at 11:33
Torab ShaikhTorab Shaikh
11911
answered Jan 2 at 11:33
Torab ShaikhTorab Shaikh
11911
answered Jan 2 at 11:33
Torab ShaikhTorab Shaikh
11911
11911
I am using a seperate component so I can show different labels and styles on the button, such as "Create", "Creating" with a spinner, and "Created". I want to reuse it throughout my app.
– MatthiasSommer
Jan 2 at 11:34
@MatthiasSommer Oh, If you think it is necessary for you to do this then you can try the event based solution I have provided.
– Torab Shaikh
Jan 2 at 11:40
Isn't there a difference between using (ngSubmit)='submit(form.value)' and calling the submit method directly?
– MatthiasSommer
Jan 2 at 12:42
add a comment |
I am using a seperate component so I can show different labels and styles on the button, such as "Create", "Creating" with a spinner, and "Created". I want to reuse it throughout my app.
– MatthiasSommer
Jan 2 at 11:34
@MatthiasSommer Oh, If you think it is necessary for you to do this then you can try the event based solution I have provided.
– Torab Shaikh
Jan 2 at 11:40
Isn't there a difference between using (ngSubmit)='submit(form.value)' and calling the submit method directly?
– MatthiasSommer
Jan 2 at 12:42
I am using a seperate component so I can show different labels and styles on the button, such as "Create", "Creating" with a spinner, and "Created". I want to reuse it throughout my app.
– MatthiasSommer
Jan 2 at 11:34
I am using a seperate component so I can show different labels and styles on the button, such as "Create", "Creating" with a spinner, and "Created". I want to reuse it throughout my app.
– MatthiasSommer
Jan 2 at 11:34
@MatthiasSommer Oh, If you think it is necessary for you to do this then you can try the event based solution I have provided.
– Torab Shaikh
Jan 2 at 11:40
@MatthiasSommer Oh, If you think it is necessary for you to do this then you can try the event based solution I have provided.
– Torab Shaikh
Jan 2 at 11:40
Isn't there a difference between using (ngSubmit)='submit(form.value)' and calling the submit method directly?
– MatthiasSommer
Jan 2 at 12:42
Isn't there a difference between using (ngSubmit)='submit(form.value)' and calling the submit method directly?
– MatthiasSommer
Jan 2 at 12:42
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54005337%2fsubmit-in-custom-angular-button-component-does-not-submit-form%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
2
Why don't you call submit from within the click function then?
– Can K.
Jan 2 at 11:19