1 form 2 submit buttons Angular 5 - html

So I have one form and I need two submit buttons, i need the ngNativeValidate to validate it, how can I get the value of the button that submitted the form in the onClickResolveTramite()?
It looks simples but I've searched for it and found nothing, i just need a true or false to know if it's approved or not.
<div class="modal-body">
<form (ngSubmit)="onClickResolveTramite(form)"
#form="ngForm"
id="resolveTraimte"
ngNativeValidate
autocomplete="off">
<!-- STATUS -->
<div class="form-row">
<div class="form-group col">
<label for="message">
Reason
</label>
<span>*</span>
<textarea class="form-control"
name="message"
rows="4"
id="message"
[(ngModel)]="tramite.message"
placeholder="Reason"
required></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="user">
User
<span>*</span>
</label>
<select class="form-control"
name="user"
id="user"
[(ngModel)]="user"
required>
<option *ngFor="let user of tramite.users"
[ngValue]="user">
{{user.nome}}
</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer"
style="border: none;">
<button class="btn btn-light"
(click)="onClickclose()">
Cancel
</button>
<button *ngIf="tramite.needApro"
type="submit"
form="resolveTraimte"
class="btn btn-danger"
name="submitTramite"
value="repprove"
formaction="repprove">
Repprove
</button>
<button class="btn btn-success"
type="submit"
name="submitTramite"
form="resolveTraimte"
value="approve"
formaction="approve">
{{ tramite.needApro ? 'Approve' : 'Complete' }}
</button>
// Controller
onClickResolveTramite(form: NgForm) {
console.log(form);
}

Assign different id to each button. Then you can obtain id of button which triggered submit using
document.activeElement.id

Related

Form submit not working when inside of a modal window. Bootstrap and Angular

I am a bit stuck here, it does not work when inside of a modal but works if it is outside.
Here is my modal
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">PLACE A VOUCHER ORDER</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="orders container">
<h6>Please Complete the fields</h6>
<form novalidate="novalidate" #orderForm="ngForm" (ngSubmit)="submit()">
<div class="form-group">
<label>SENDER NAME</label>
<input type="text" class="form-control" name="senderName" #title="ngModel" [(ngModel)]="model.senderName" placeholder="Enter sender name" required />
</div>
<div class="form-group">
<label>SENDER EMAIL</label>
<input type="text" class="form-control" name="senderEmail" #title="ngModel" [(ngModel)]="model.senderEmail" placeholder="Enter sender email" required />
</div>
<div class="form-group">
<label>RECIPIENT NAME</label>
<input type="text" class="form-control" name="recipientName" #title="ngModel" [(ngModel)]="model.recipientName" placeholder="Enter recipient name" required />
</div>
<div class="form-group">
<label>RECIPIENT EMAIL</label>
<input type="text" class="form-control" name="recipientEmail" #title="ngModel" [(ngModel)]="model.recipientEmail" placeholder="Enter recipient email" required />
</div>
<div class="form-group">
<label>VOUCHER</label>
<select name="voucher" class="form-control" #title="ngModel" [(ngModel)]="model.voucher" required>
<option value="500">500 USD</option>
<option value="1000">1000 USD</option>
<option value="2500">2500 USD</option>
<option value="5000">5000 USD</option>
</select>
</div>
<div class="form-group">
<label>DEDICATION</label>
<textarea type="text" class="form-control" name="dedication" #body="ngModel" [(ngModel)]="model.dedication" placeholder="Enter text" required></textarea>
</div>
<button [disabled]="orderForm.invalid" class="btn btn-block btn-primary">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Cross click')">Cancel</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
Here is the submit() on the ts file. The button is initially disabled when all the fields have not yet filled and in there is also my httppost method from the service ts.
submit(): void {
if(this.orderForm.invalid){
return;
}
this.orderService.createOrder(this.model).subscribe(response => {
alert('order successfully created!');
console.log('Got response from API:', response);
}, error => {
});
}
When I click submit nothing happens at all. It should show an alert when it is successfully submitted.

Why can't I get my date input on my Form to send via HTTP?

First issue:
The form I'm creating is to post information to a CRM called Granot. For some reason the date input and the drop down options won't post.
I took out the type="date" and the post went through, but I would like my users to have a calendar to use.
Second issue:
After submitting the form I would like the user to be redirected to a thank you page and not to the post gateway URL.
Here is the Developer's guide I found on the granot website. Is there anyone on here who would be more familiar with this document? https://docs.google.com/document/d/1VMpPFi4c4EhQUg9qab4tPkypgnUQF4U7L8Y-HU8I-R0/preview
I saw on the table in the document a redirurl name to add. I wouldn't know how to use it though.
EDIT: After submitting the form it takes me to actions page and says:
"0,16, Move date has to be greater than today,0,0"
<form name="basicform" id="get_quote_from_test" method="POST" action="https://lead.hellomoving.com/LEADSGWHTTP.lidgw?&API_ID=E432CD67C51E">
<div id="form_cotent">
<div class="regForm">
<div id="step_1">
<div align="center" class="tab">
<h3 align="center">Compare Rates and Save Money!</h3>
<h2 align="center">About Your Move</h2>
<input placeholder="From Zipcode" oninput="this.className = ''" name="ozip">
<input placeholder="To Zipcode" oninput="this.className = ''" name="dzip">
<input type="date" placeholder="mm/dd/yyyy" oninput="this.className = ''" name="movedte">
<select name="movesize">
<option value="" selected disabled hidden>Size of your Move</option>
<option value="Partial Home" name="movesize">Partial Home</option>
<option value="Studio" name="movesize">Studio</option>
<option value="1 Bedroom" name="movesize">1 Bedroom</option>
<option value="2 bedrooms" name="movesize">2 bedrooms</option>
<option value="3 bedrooms" name="movesize">3 bedrooms</option>
<option value="4 bedrooms" name="movesize">4 bedrooms</option>
<option value="More than 4 bedrooms" name="movesize">More than 4 bedrooms</option>
<option value="Office" name="movesize">Office</option>
</select><br>
</div>
<div align="center" class="">
<button id="step1_fwd" class="btn bttn1" type="button">
<span class="text">Start Your Quote</span>
</button>
<!--<button id="step1_fwd" class="btn btn-primary bttn1" type="button">Start Your Quote</button>-->
</div>
</div>
<!---- Step 2 --->
<div id="step_2" class="step_2" style="display: none;">
<div align="center" class="tab">
<h2>Step 2</h2>
<h3>Contact Info</h3>
<input placeholder="First name" oninput="this.className = ''" name="firstname">
<input placeholder="Last Name" oninput="this.className = ''" name="lastname">
<input placeholder="E-mail" oninput="this.className = ''" name="email">
<input placeholder="Phone" oninput="this.className = ''" name="phone1">
</div>
<div align="center">
<button type="button" class="prevBtn" id="step2-bck">
<span class="txt">Back</span>
</button>
<div class="subBtn">
<button id="step2_fwd" class="btn bttn1" type="button">
<span class="">Next</span>
</button>
<!--<button id="step1_fwd" class="btn btn-primary bttn1" type="button">Start Your Quote</button>-->
</div>
</div>
</div>
<div id="step_3" class="step_3" style="display: none;">
<div align="center" class="tab">
<h2>Step 2</h2>
<h3>Contact Info</h3>
<input placeholder="E-mail" oninput="this.className = ''" name="email">
<input placeholder="Phone" oninput="this.className = ''" name="phone1">
</div>
<button type="submit" class="auto">Submit</button>
</div>
<!--
<button type="button" class="prevBtn" id="step3_bck">
<span class="">Back</span>
</button>
<div class="subBtn">
<button id="get_quote" class="bttn1" type="submit">
<span class="text">Get A Quote</span>
</button>
-->
<!--<button id="step1_fwd" class="btn btn-primary bttn1" type="button">Start Your Quote</button>-->
</div>
</div>
</div>
</div>
</form>
</section>

Submit button does not pass form data

Here is my code:
<form class="form-horizontal" action="/abc" method="POST">
<div><input type="text" id="name" value="a"></div>
<div class="border-top row">
<button type="submit" class="btn float-right" name="update">Update
</button>
</div>
</form>
When I click button it just pass data like below:
update:
Why is it not showing other form data?
You should add name attribute to the input field to get the value of text-box on click of submit button.
<form class="form-horizontal" action="/abc" method="POST">
<div><input type="text" id="name" value="a" name="uname"></div>
<div class="border-top row">
<button type="submit" class="btn float-right" name="update">Update
</button>
</div>
</form>

How to close modal after form submit event in Angular2?

I want to close modal after form submit event is finished. I've done following things:
<form [formGroup]="alertForm" novalidate (ngSubmit)="save(alertForm.value, alertForm.valid)">
<div class="row" style="padding-left: 20px; padding-right: 20px;">
<div class="input-field">
<div class="form-group input-field">
<label for="recipientLogin">Available Recipient</label>
<textarea class="form-control validate" id="recipientLogin" required formControlName="recipientLogin"> </textarea>
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<select class="form-control" id="alert_level" formControlName="alert_level">
<option value="0" selected> Emergency </option>
<option value="1">Major</option>
<option value="2">Minor</option>
<option value="3">Information</option>
</select>
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<label for="subject">Subject</label>
<input type="text" class="form-control validate" id="subject" required formControlName="subject">
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<label for="message">Message</label>
<textarea class="form-control validate" id="message" required formControlName="message"> </textarea>
</div>
</div>
<div class="input-field">
<div class="form-group input-field">
<input type="file" class="form-control" id="media1" />
<input type="file" class="form-control" id="media2" />
<input type="file" class="form-control" id="media3" />
</div>
</div>
</div>
<div>
<div class="col s6">
<div style="padding-left: 20px; padding-right: 20px;">
<button type="submit" class="btn btn-default input-field">Send</button>
</div>
</div>
<div class="col s6 right-align">
<div style="padding-left: 20px; padding-right: 20px;">
<button type="submit" data-dismiss="modal" class="btn btn-default input-field">Close</button>
</div>
</div>
</div>
</form>
This triggers save() on form submit but does not close the modal for that I tried data-dismiss="modal" on save button, which block the save() call and close the modal.
I want to complete save() first after that close modal.
Assuming the form is inside a bootstrap modal, you can use
$('#modalID').modal("hide") to close the modal.
For full reference check here.
Alternatively, on success of your save call you can close the modal via the 'Close' button.
<button #btnId type="submit" />
Which your component can close via this.btnId.click()

How to create a Cancel button in Bootstrap

I have the following Bootstrap markup:
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Username</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
</div>
</div>
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
<button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
</div>
</div>
When I click the Create Profile button the form works fine letting me know that certain fields are "Required". But when I click the Cancel button I cannot leave the form due to incomplete required fields.
Is there a form cancel button capability in Bootstrap?
Change your code to the following:
<!-- Button (Double) -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit"></label>
<div class="col-md-8">
<button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
Cancel
</div>
</div>
simply set the type attribute to reset as shown below;
<button type="reset" class="btn btn-default pull-right">Cancel</button>
if you would like to keep both elements as <button>. You can create a click handler with jQuery:
$('#cancel').click(() => {
location.href = '../' //returns to parent
})
A direct method is to use onclick="history.back()" Like so:
<button id="cancel" name="cancel" class="btn btn-default" onclick="history.back()">Cancel</button>
It is supported in all browsers at the time of this posting