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?
Related
I need to collect a get variable in Laravel 8 passed as follows:
127.0.0.1/search/keywordToSearch
I have this route created in my web.php file:
Route::get('/search/{keyword}', [SearchController::class, "search"])->name('search');
My form is:
<form class="form-horizontal" action="{{ route('search') }}" >
<fieldset>
<div class="form-group">
<label for="keyword" class="col-lg-2 control-label">Keyword</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="keyword" name="pelicula" placeholder="keyword">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</fieldset>
</form>
But when I push the send button the url obtained is this:
http://127.0.0.1:8000/search?keyword=safafs
How I must do about passing the input value to my controller?
I think in this particular scenario you don't need to pass a parameter trough the route. Make it simple, like
Route::get('/search', [SearchController::class, "search"])->name('search');
In the controller declare the action like
public function search(Request $request)
{
dd($request->pelicula); // here you have your keyword data
}
I have a form control "ConnectorType" which I turned into a dropdown list with pre-defined values (just 3qty currently)
When the user selects and item from this dropdown list, depending on the value selected I then want to populate another text box form control underneath.
To better explain, please see image below:
Example, if TCP Server IN is selected then the form control underneath (textbox)should automatically say "Inbound"
Ideally this text box should also have an attribute/configuration that prevents the user from entering their own text, grayed out perhaps. Once the create form is submitted, the textbox that contains this value "Inbound" will then be added to the SQL Table using Enitity Framework.
The solution requires that this field dynamically changes each time a new item is selected from the list.
Current code for the drop down list:
Page Model Class:
public IEnumerable<SelectListItem> ConnectorTypeList { get; private set; } // temp
public IActionResult OnGet()
{
// prepare the list in here
ConnectorTypeList = new SelectListItem[]
{
new SelectListItem ("TCP Server IN", "TCP Server IN"),
new SelectListItem ("TCP Server OUT", "TCP Server OUT"),
new SelectListItem ("SMTP Server IN", "SMTP Server IN")
};
return Page();
}
Page View:
<div class="form-group">
<label asp-for="ConnectorModel.ConnectorType" class="control-label"></label>
<select asp-for="ConnectorModel.ConnectorType" class="form-control" asp-items="#Model.ConnectorTypeList"></select>
<span asp-validation-for="ConnectorModel.ConnectorType" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ConnectorModel.DataFlow" class="control-label"></label>
<input asp-for="ConnectorModel.DataFlow" class="form-control" />
<span asp-validation-for="ConnectorModel.DataFlow" class="text-danger"></span>
</div>
Note the current form-control I'm wanting to modify is the "ConnectorModel.DataFlow" in the above page view code. At the moment it's just a simple textbox that the user can enter their own choice of text.
I'm going round in circles having read up on page handlers etc. It seems there is a onchange event but unsure how to implement this and somehow link it back to the page model class, run a method then postback the result. I'm not looking for a JQuery script as it seems this should not be required in the newer framework, not sure I just don't want a complicated long solution given I will be using a lot of these throughout the app. Thanks in advance...
The easiest way is to use onchange() on your <select> tag and assign data to input using js.(Add id attribute for <select> and <input> before)
If you would like to prevent the user from entering their own text, just use readonly attribute for you input.
<input asp-for="DataFlow" id="dataFlow" class="form-control" readonly/>
The Sample Page View:
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="ConnectorModel.ConnectorType" class="control-label"></label>
<select asp-for="ConnectorModel.ConnectorType" id="connectorTypeList" class="form-control" asp-items="#Model.ConnectorTypeList" onchange="assignData()">
<option>Select ConnectorType</option>
</select>
<span asp-validation-for="ConnectorModel.ConnectorType" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ConnectorModel.DataFlow" class="control-label"></label>
<input asp-for="ConnectorModel.DataFlow" id="dataFlow" class="form-control" readonly />
<span asp-validation-for="ConnectorModel.DataFlow" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
#section Scripts{
<script>
function assignData() {
var contentType = $("#connectorTypeList").val();
if (contentType == "TCP Server IN") {
$("#dataFlow").val("Inbound");
}
}
</script>
}
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
I have multiple html helpers. When I click login button I am disabling user_register div using jquery and when I enter details the username and password the model binder is able to bind properly but when I click Register I am disabling user_login div and enabling user_register div and when I enter the details only email and firstname is what the model binder is able to bind and not username, password. Is this becoz I am using the same html helpers more than once. How to handle this. I have the following code
<div class="user_login">
<label>Email / Username</label>
#Html.TextBoxFor(model => model.Email)
<br />
<label>Password</label>
#Html.TextBoxFor(model => model.Password)
<br />
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i>Back
</div>
<div class="one_half last">
<input type="submit" style="border: none" name="action" class="btn btn_red" value="Login" />
</div>
</div>
Forgot password?
</div>
<div class="user_register">
<label>Full Name</label>
#Html.TextBoxFor(model => model.First_Name)<br />
<label>Email Address</label>
#Html.TextBox(model=>model.Email)<br />
<label>User Name</label>
#Html.TextBoxFor(model => model.User_Name)<br />
<label>Password</label>
#Html.TextBox(model=>model.Password") <br />
</div>
The controller follows here
public ActionResult Index(Customer customer, string Action)
{
//something here
}
You have not shown you complete view, but assuming all those controls are generated inside one form element, then all controls will post back unless you make the inputs disabled. If so, then the first input with name="Email" is bound and the second one is ignored by the DefaultModelBinder. (since the first one is only hidden, its value is probably empty). Your script needs to ensure that the 2 inputs in the login section are disabled, for example
#Html.TextBoxFor(model => model.Email, new { id = "login-email" })
and
$('#login-email').prop('disabled', true);
Note the id attribute so you can select the correct one (and prevent duplicate id's which is invalid html.
An alternative would be to create 2 separate forms.
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');