Using Spring with Thymeleaf (spring-boot-starter-thymeleaf) current version. When I have a form where some fields are null, Thymeleaf is showing null in the input control. How do I make it just show blank?
This is only happening when I use fetch and replace a div. If I open a window from the URL the content is fine. What's happening?
TIA
<label for="address1">Address:</label>
<input type="text" name="address1" id="address1" th:field="*{address1}"> <br>
<label for="address2"> </label>
<input type="text" name="address2" id="address2" th:field="*{address2}"> <br>
Nevermind. I realized I had some binding code that wasn't checking for that.
Related
I am using the Angular Component library which includes material-input. Is there a way to disable input auto validate when changing or emptying the material-input? Meaning that I want to only validate the form upon submit.
Plus the onSignInPressed() function is not getting triggered on submit despite that the material-button is of type submit.
<div class="container">
<form (ngSubmit)="onSignInPressed()" #signInForm="ngForm">
<div>
<material-input
floatingLabel type="email"
label="E-mail"
[(ngModel)]="email"
ngControl="email"
required></material-input>
</div>
<div>
<material-input
floatingLabel type="password"
label="Password"
[(ngModel)]="password"
ngControl="pass"
required></material-input>
</div>
<div class="w-100">
<material-button class="mx-0 btn-primary w-100 margin-zero" type="submit"
[disabled]="!signInForm.form.valid">
Sign In
</material-button>
</div>
</form>
</div>
You can try to use a different value accessor on the material-input, however you won't be able to validate the form on submit.
With changeUpdate, validation will be triggered on blur or when press ENTER
<material-input changeUpdate [(ngModel)]="value"
Docs
About the material-button, there is an issue on github with a hacky solution.
You can also try to add an hidden input
<input type="submit" hidden />
I have this form and I want it to connect to an external database. I have no idea how to and after a lot of research its still not clear to me.
Here is my code. Any guidance will be helpful.
#{
ViewData["Title"] = "Index";
}
<h2>User Information</h2>
<p>This is your user information!</p>
<form action="Result">
First name:<br>
<input type="text" name="firstname" value=" ">
<br>
Last name:<br>
<input type="text" name="lastname" value=" ">
<br>
Role:<br>
<input type="text" name="Role" value=" ">
<br>
Ranking:<br>
<input type="text" name="Ranking" value=" ">
<br><br>
<input type="submit" value="Save">
</form>
I don't really know which direction to take this form. Many thanks in advance
You don't connect the actual form itself, you connect your backend to the DB, and you connect the form to your backend.
Make some sort of route to handle the form request and then connect to your database in that route, and use it to input the data to the database.
Related links:
https://docs.asp.net/en/latest/tutorials/first-mvc-app/working-with-sql.html
Your form should post data to an existing action inside an existing controller, and then, your database db connection already must be defined in your server-side MVC application.
At your point, probably, your form is looking for something called "Result"...
Now, I think that you are able to keep your research for solutions to your specific case.
Following the provided documentation in angular material, I have setup a working autocomplete directive.
The required validation is being shown in the nested error message "div", but there is no effect on the parent form.
The parent form seems to be valid even for empty value in autocomplete.
<form ng-submit="ngSubmit()" layout="column" class="md-padding"
name="itemsForm" flex>
<md-input-container>
<label>Code *</label>
<input type="text" name="code" required ng-model="ngModel.code"/>
</md-input-container>
<md-autocomplete flex
required
md-input-name="author"
md-search-text="searchText"
md-search-text-change="ngModel.author = (searchText)"
md-selected-item-change="ngModel.author = item"
md-items="item in filterAutocomplete(searchText)"
md-item-text="item"
md-floating-label="Author *">
<md-item-template>
<span md-highlight-text="ctrl.searchText">{{item}}</span>
</md-item-template>
<div ng-messages="autocompleteForm.autocomplete.$error">
<div ng-message="required">This field is required</div>
</div>
</md-autocomplete>
<md-button class="md-primary" type="submit"
ng-disabled="itemsForm.$invalid"
ng-class="{'md-raised': itemsForm}">
Save
</md-button>
</form>
How can I achieve the similar behaviour to normal required input fields in side a form, when using md-autocomplete?
There have been some commits in the past few days that address this issue. It is fixed in master I believe.
https://github.com/angular/material/issues/7350
https://github.com/angular/material/issues/5896
You can try this version:
https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.6-master-3310aa9/angular-material.css
https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.6-master-3310aa9/angular-material.js
This should be easy to fix, but I can't find out why it's not working.
I have a web "app" that runs in Safari, and it's made for users to add to the home screen. There's a web form where the user enters a first and last name. Here's the simple code for that form.
<fieldset>
<div class="row">
<label>First Name</label>
<input type="text" name="first_name" id="pFirstName" value="" autocapitalize="on" autocorrect="off" placeholder="John" />
</div>
<div class="row">
<label>Last Name</label>
<input type="text" name="last_name" id="pLastName" value="" autocorrect="off" autocapitalize="on" placeholder="Doe" />
</div>
</fieldset>
Very simple. The problem is that the Last Name form is not capitalized when the user switches to it. I ran it directly in mobile Safari, and it worked fine. When I added to the home screen, I had the same issue...
Is this just a bug in iOS/webkit (because it used to work...)? Not sure if there's some sort of script to force the auto-capitalization? Thanks!
Edit: If I click on the field directly, it capitalizes. The problem is when I fill in text for first name, and click the "Next" arrow on the top of the keyboard.
Try using autocapitalize="sentences"
I've got a real simple ASP.NET MVC4 app that uses JQuery Mobile and displays a list of users and their information. 3 fields off the model are phone numbers. These fields can contain a null value, so I'd like to link the phone number using <a href="tel:" if it exists, and nothing if not. I came up with this:
<div data-role="fieldcontain">
<label for="textinput1"><strong>Office Phone:</strong></label>
if(!#String.IsNullOrEmpty(user.OfficePhone)){
<input name="" id="textinput1" value="#user.OfficePhone" type="text" readonly="true"/>
} else {
<input name="" id="textinput" value="#user.OfficePhone" type="text" readonly="true"/>
}
</div>
But would think there's a cleaner, better way to do this. Are there any other options or am I stuck with writing out the <input> tag twice in both conditions?
This is untested code. Hopefully it gets the idea across:
#{string pref="tel:"}
#if(String.IsNullOrEmpty(user.OfficePhone))
{pref="";
}
<div data-role="fieldcontain">
<label for="textinput1"><strong>Office Phone:</strong></label>
<input name="" id="textinput1" value="#(pref)#(user.OfficePhone)" type="text" readonly="true"/>
</div>