i am learning angular can someone please help me on following :
I have one form which save user (i call api on this submit click). i need to use same form for update user , for that i took two buttons i show "submit" button if user is new (i managethis new and old user from ge api call in OnInit()) and another button is "update" button, i show and hide this buttons depending on Get api call for user in onInit().
form demo code :
<form class="form-area" (ngSubmit)="ngSubmit(applicant)" name="applicantForm" #applicantForm="ngForm" ngNativeValidate>
<div> some fileds</div>
<div class="row" style="content:center">
<div class="col-md-12">
<div class="form-row">
<div class="form-group">
<button *ngIf="submitStatus" type="submit" class="btn btn-info" [disabled]="!applicantForm.form.valid">
<i class="fa fa-send-o"></i> Submit</button>
<button *ngIf="updateStatus" type="submit" class="btn btn-info" [disabled]="!applicantForm.form.valid">
<i class="fa fa-send-o"></i> Update</button>
</div>
</div>
</div>
</div>
</form>
question :
i call (ngSubmit)="ngSubmit(applicant)" method on submit button call to save user, but i confused in how i differentiate this both operation to call ngSubmit(applicant).
i need to perform both operation in single function call from controller.
thanks
Related
I am trying to learn .net core and what I want to do is: I have a search bar and a GetDetail function in controller. I want to trigger that function when clicking search button according to text in form. But when I click button, nothing happens. I did not complete the trigger part but even if I simply redirect to another page with href, also nothing happens. Here is my search bar view code which taken from sbadmin2:
<div class="row justify-content-center">
<div class="col-6 p-3">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Input" aria-label="Search" aria-describedby="basic-addon2" id="code">
<button class="btn btn-primary" type="button" action="/Books/GetDetail?">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</div>
and the function I want to trigger is a get request:
public IActionResult GetDetail(string codes)
{
var request = $"?codes={codes}";
var products = _httpTool.HttpGetAsync<List<Products>>($"{AppSettings.ApiUrl}/GetProducts{request}");
var productList = products.Result.ToList();
return Json(productList);
}
Why nothing is happening and how can I achieve this?
Thanks in advance!
try something like this:-
<form method="post" asp-action="GetDetail">
//clarify code
<input type="submit" value="Search" class="btn btn-outline-primary mt-1"/>
//clarify code
</form>
[HttpPost]
public IActionResult GetDetail(string codes)
{
var request = $"?codes={codes}";
var products = _httpTool.HttpGetAsync<List<Products>>($"{AppSettings.ApiUrl}/GetProducts{request}");
var productList = products.Result.ToList();
return Json(productList);
}
After clicking Searchyou see something will happen.
In Razor pages ASP.NET Core, how do I do a basic onclick event for a button which is of type button?
Do I need to wire up an AJAX GET request to get the below "Resend Code" button to work? There is plenty of chatter about OnPost this and that.. but I don't want to post.
Can't be this hard?
<form method="post">
<div asp-validation-summary="All"></div>
<div class="form-group-item">
<label asp-for="Input.TwoFactorCode"></label>
<input asp-for="Input.TwoFactorCode" class="input" />
<span asp-validation-for="Input.TwoFactorCode"></span>
</div>
<div class="form-group-item">
<label class="margin-0" asp-for="Input.RememberMachine">
<input asp-for="Input.RememberMachine" />
#Html.DisplayNameFor(m => m.Input.RememberMachine)
</label>
</div>
<div>
<button type="button" asp-page-handler="ResendCode" class="btn btn-light">Resend Code</button>
<button type="submit" class="btn btn-secondary">Confirm</button>
</div>
</form>
As it stands, the button won't do anything. You can use JavaScript to intercept the button click and then fire a get request using AJAX (jQuery example below):
$('.btn.btn-light').on('click', function(){
$.get('?handler=ResendCode', data, function(){
...
});
});
You can try changing the button to use formmethod="get":
<button type="submit" formmethod="get" asp-page-handler="ResendCode" class="btn btn-light">Resend Code</button>
Note, this will only work for buttons that have type="submit" or type="image" (other type-values don't cause the form to submit). Also it's an HTML5 attribute.
Reference:
https://html.com/attributes/input-formmethod/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod
maybe try making your own custom handler methods other than OnPost() and OnGet()
I have this bootstrap button group with radio buttons:
<div id="MyField" data-toggle="buttons" class="btn-group">
<label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val1" autocomplete="off">First</label>
<label class="btn btn-primary btn-sm active"><input type="radio" name="MyField" value="Val2" autocomplete="off" checked="">Second</label>
<label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val3" autocomplete="off">Third</label>
<label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val4" autocomplete="off">Fourth</label>
</div>
If I select the value using the mouse, everything works fine. However, if I move to the group using the tab key and select another option using the keyboard arrow keys, the following happens:
The active button changes visually as expected
The change javascript event (handled using jQuery $('#MyField').change(...)) is fired as expected
When the form is submitted, the original value of the default selected radio button is sent to the backend.
Any ideas on why this is and how to fix it?
Turns out this is a bug in bootstrap 3.3.4 which is fixed in 3.3.7. After an update, everything works fine.
My fix was to just include an onfocus attribute to the inputs.
<label class="btn btn-primary btn-sm"><input type="radio" name="MyField" value="Val1" autocomplete="off" onfocus="$(this).click();">First</label>
I need to reset my form to my original state after submitting the form. I'm using material form fields in my FormGroup to create the input fields. So, when i call reset method from formgroup, the form doesn't revert back to its original state, instead it validates make all the fields to invalid state.
My form template
<form [formGroup]="createUserForm" (ngSubmit)="createUser()" novalidate class="add_user_form normal_form">
<div class="form_input_field">
<i class="fas fa-user"></i>
<mat-form-field>
<input formControlName="uname" matInput placeholder="UserName*">
<mat-error *ngIf="createUserForm.controls['uname'].hasError('required') && formSubmitted">
Please enter your username
</mat-error>
</mat-form-field>
</div>
<div class="form_button_field">
<button mat-raised-button class="form_btn_submit" color="primary">Submit</button>
<button mat-raised-button type="reset" class="form_btn_cancel" color="warn">Cancel</button>
</div>
</form>
My Submit function
createUser() {
if(this.createUserForm.valid) {
this.createUserForm.reset();
}
}
How to bring back the form to original state after resetting?
I am building a website with a google+ login.
The site is responsive, so i have a different google+ button for web and mobile as follows:
signin button for mobile view -> hidden in web view
<div id="mobile" class="container visible-xs hidden-sm hidden-md hidden-lg">
<div class="row">
<div class="col-xs-12 mobile-signup-form">
<form class="form-signin">
<h2 class="form-heading visible-xs hidden-lg hidden-sm hidden-md">Find great tour guides.</h2>
<input type="text" class="form-control" placeholder="Pick a Username" autofocus>
<input type="text" class="form-control" placeholder="Your email">
<input type="password" class="form-control" placeholder="Create a Password">
<button id="submit-btn" class="btn btn-lg btn-primary btn-block" type="submit">Sign up for Tourbly</button>
<div class="hr-with-words">
<span class="smallor">or</span>
</div>
<div id="gSignInWrapper">
<div id="customBtn_M" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
</form>
</div>
</div>
</div>
signin button for web view -> hidden in mobile view
<div id="gSignInWrapper" ng-show="immediateFailed">
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Sign up with Google</span>
</div>
</div>
I use the following JS code to render the button for web view
gapi.signin.render('customBtn', {
'callback': 's_up_c_bks_loc',
'clientid': '1066634592899.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email'
});
I can only pass one id to the render function, how can i get the right button rendered for the right view (mobile or web).
I have tried rendering both but the last one overrides the first.
I'm using angular js, so any suggestions/solutions which makes use of that will be appreciated.
Thanks
You can call the render function more than once, which might be the easiest way. You can move the second parameter to a var which you pass to both calls, or you might want to take advantage of thew new page level config: https://developers.google.com/+/web/signin/reference#page-config
This might be the easiest way, as it will trigger an immediate mode check (see whether the user has previously consented, and fire the callback) as soon as the page loads. This means you could choose which to render at that time, as part of the immediate failed (I notice you have a reference to an immediateFailed var in ng-show which is presumably only displaying if the immediate check failed, so you're doing the right sort of thing already).
If using page level config, you wouldn't even need to pass the parameters, just call:
gapi.signin.render('customBtn');
gapi.signin.render('customBtn_M');