How do you nest HTML elements using Razor?
Take this simple HTML for example
<label class="input">
<i class="icon-prepend fa fa-user"></i>
<input type="text" name="fname" placeholder="First name">
</label>
What would the equivalent to this be in Razor? For whoever thought this is too broad. I basically want to register #Html.Label() then go on and set child attributes for it which will include an icon and and textbox.
Is it even possible to do what I'm trying to achieve with razor?
It will create something like this
I tried to figure it out but failed badly. This is the best I got.
<label class="input">
#Html.Bootstrap().Icon("icon-prepend fa fa-user")
#Html.Bootstrap().TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>
I was hoping to create the label in razor too.
Create a custom HTML helper. The output of the HTML helper will be what #CarlosAraujo suggests:
<label class="input">
<i class="icon-prepend fa fa-user"></i>
#Html.TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>
You call it something like this:
#Html.MyCustomAwesomeTextBoxFor(...)
In this way you can encapsulate and re-use this component anywhere in your code.
You can do something like this:
<label class="input">
<i class="icon-prepend fa fa-user"></i>
#Html.TextBoxFor("fname", htmlattributes: new { placeholder = "First name" })
</label>
Related
Hi all i am using MEAN stack in my Web portal with AngularJS as my front-end,
In my portal i want to upload user profile image, so i have used uplodcareplatform to upload the images in my portal.
My Plunker
after chooses the Image we get that image url in upload input, then we need to Bind or copy these url value into below input to store in a backend. so we tried to get the solution like ng-bind="userimg=img" value="{{img}}" which is not working. please check and update us thanks.
My Code :-
<div>
<label >Upload Img</label>
<input ng-model="img" role="uploadcare-uploader" name="content" data-public-key="240426036fd9daf2d723" data-images-only />
</div>
<div>
<label for="quantity">Fetch above input value in this input</label>
<input type="text" ng-model="userimg" ng-bind="userimg=img" value="{{img}}">
</div>
I have one temporary solution for your question as you are using angularJS 1 version
<div>
<label >Upload Img</label>
<input id="fileId" role="uploadcare-uploader" name="content" data-public-
key="240426036fd9daf2d723" data-images-only />
</div>
<div>
<label for="quantity">Fetch above input value in this input</label>
<input type="text" ng-model="userimg">
<input type="submit" value="Set">
</div>
and in controller
$scope.userimg = null;
$(':submit').on('click', function() {
var input = $('#fileId');
$scope.userimg = input[0].value;
$scope.$apply();
})
On click of set button, you will get the value.
As you are using this library https://ucarecdn.com/libs/widget/3.3.0/uploadcare.full.min.js I can give this temporary solution
if you are using angularJs 1 any version then use angular-uploadcare library
https://github.com/uploadcare/angular-uploadcare
and if you are using angular 2 or above version then use ngx-uploadcare-widget
https://github.com/uploadcare/ngx-uploadcare-widget
You just have to display the img variable in the text field for <label for="quantity">.
In ts file declare a variable img
img;
In html file
<div>
<label >Upload Img</label>
<input [(ngModel)]="img" role="uploadcare-uploader" name="content" data-public-key="240426036fd9daf2d723" data-images-only />
</div>
<div>
<label for="quantity">Fetch above input value in this input</label>
<input type="text" [(ngModel)]="img" value="{{img}}">
</div>
I am trying lots of time to change class and inline styles too.
but not getting any change.
This is my html code (what i want to modify my checkbox):
<div class="checkbox-custom checkbox-primary mb5">
<input type="checkbox" id="checkboxExample1">
<label for="checkboxExample1"></label>
</div>
This is my Razor Syntax:
#Html.CheckBoxFor(m =>m.isNewlyEnrolled, new {#style="width:25px; height:25px;", #class = "checkbox-custom checkbox-primary mb5", id="checkboxExample1"})
I used to implement an Angular 2/4 application with Bootstrap 3 and used the Reactive Forms approach. I had a field-validation where the border of the input-field turned red and an error message appeared under the field in red font color.
it looks like this:
<div class="form-group row"
[ngClass]="{'has-error': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" />
<span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
Now i have to use Bootstrap 4 and neither the error message or the input-field turns red. How do i realise this? I tried to change the class of the parent span-block to "form-text" but it didn't work.
For beta version of Bootstrap v4, you can check out Form validation docs. There you can read about the new way, supported by all modern browsers for HTML5 way of form-validation with valid/invalid css classes. There Bootstrap uses the .was-validated and .invalid-feedback classes for what you want to achieve (see code snippet).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("needs-validation");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
</script>
If you want something more similar to Bootstrap 3, you can use what they call server-side validation, as it is written:
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
Previous answer for alpha version of Bootstrap V4 (if you must use this).
On Bootstrap V4 Form Validation Docs there is the following example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
So i think you just need to change the has-error class to has-danger
This is the solution:
<div class="form-group row">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
[ngClass]="{'is-invalid': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" >
<span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
i needed to put the [ngClass]into the input-tag. Then i had to define the class as is-invalid and set the parent span-class to invalid-feedback
i know that your question is for long time ago, but it is the best way to validate the form-control input field by reactive form technique and bootstrap 4 to display the validation. first you need to write some code for your form :
in html section:
<form [formGroup]="myForm">
<div class="form-group">
<label for="name">first Name: </label>
<input type="text" class="form-control" formControlName="firstName" id="name">
<div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
<div *ngIf="firstName.errors.required">filling name is required!</div>
</div>
</div>
in ts file, you should implement the logic to conduct the validation.
in ts file:
myForm = new FormGroup({
'firstName':new FormControl('',Validators.required)
})
//getter method
get firstName(){
this.myForm.get('firstName');
}
now you can see that the validation is working. now to give style to input field to show the red border around the invalid input, just go to css file of component and add this class to the css file:
.form-control.ng-touched.ng-invalid{border:2px solid red;}
and simply you can see the result.
I have a problem with Thymeleaf date format when I send a date. The HTML shows the date correctly within a h3 tag but not inside the code of the datepicker and I can not understand why....
<div>
<label for="birthdate" th:text="#{editprofile.about4.birthdate}">Birth date</label>
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="date" name="date" id="birthdate" class="form-control margin-bottom-20" th:value="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}" th:field="*{birthdate}">
</input>
</label>
<h3 th:text="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}"></h3>
</div>
why it shows the date with hours in one place and correctly in the other...... input type="date" name="birthdate" id="birthdate" class="form-control margin-bottom-20" value="1932-10-10 00:00:00.0"
Thanks
th:field and th:value shouldn't be used on the same tag. (th:field sets the name, id and value attributes of the tag it is on.) You'll see that you would get the correct formatting if you left off th:field, but then the form wouldn't submit correctly. In my opinion, the way to fix this is to:
Add an InitBinder method to your controller, like this:
#Controller
public class WhateverController {
.
.
.
#InitBinder
public void initBinder (WebDataBinder binder) {
binder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("yyyy/MM/dd"), true));
}
.
.
.
}
Remove the th:value. Your HTML should look like this:
<div>
<label for="birthdate" th:text="#{editprofile.about4.birthdate}">Birth date</label>
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="date" name="date" id="birthdate" class="form-control margin-bottom-20" th:field="*{birthdate}" />
</label>
<h3 th:text="${#dates.format(profile2about2th.birthdate,'yyyy/MM/dd')}"></h3>
</div>
There are ways to add global binders as well, if you want this to work for your entire application and not just that one controller.
Ensure that the date passed in as value (in this case birthdate) is of this format:
yyyy-mm-dd
and NOT in the date picker's format mm/dd/yyyy
Read more here.
I am trying to do the following :
<span *ngIf="heroForm?.dirty">
FOO
</span>
<form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#name="ngModel">
</div>
</form>
Basically, displaying a span outside of the form tag, using the form states (here dirty). Unfortunately, FOO is never shown. Is there any way to work around this ?
Create a model property, showFoo: boolean
and change that on some form event, like onChange
then your span will look like
<span *ngIf="showFoo">FOO</span>