I am trying to display text from my database. The <p> doesn't show the expected newlines but <textarea> does.
I want to use it like this <p>{course.overview}</p>.
When I use this one <textarea type="text" placeholder={course.overview} className="form-control color-black overflow:scroll" name="overview" rows="95" disabled/> it keeps the format.
It's not exactly what I want but it's better than <p>{course.overview}</p>.
What can I do?
I tried to use same className in <textarea type="text" placeholder={course.overview} className="form-control color-black overflow:scroll" name="overview" rows="95" disabled/>
with
<p className="form-control color-black overflow:scroll" >{course.overview}</p> but it changes nothing.
Pictures for example textarea= https://ibb.co/zSmmHrT AND p = https://ibb.co/1L07Dfk
Thanks in advance ! :)
Instead of using the <p> tag you could use the <pre> tag if it's plain text. Otherwise you would need to convert all your newlines with <br>
More about the issue here: https://www.w3schools.com/html/html_paragraphs.asp
Related
I have used the following code segment where I wanted to change the value of the input box when it is loaded, but it didn't work
test.template.html
<div class="col-value">
<input type="text" class="input-box" autofocus="autofocus" ng-blur="saveData(value)" ng-class="getColor(value)" ng-model="value" >%
</div>
getColor function is written in the controller where the color is decided according to the value given.
Could soomeone help me to solve this issue ? Thanks inadvance
The above code is correctly work when the relevant css classes are set into the input box as follows.
<span class="color">
<div class="col-value">
<input type="text" class="input-box" autofocus="autofocus" ng-blur="saveData(value)" ng-class="getColor(value)" ng-model="value" >%
</div>
</span>
Setting 'novalidate' or 'formnovalidate' will NOT fix this issue
I'm using the framework DNN. This framework wraps each page in a form tag which breaks my custom forms. To get passed this I'm using ng-form on a tag. Because of this fix I always see the default tooltip even though I'm using bootstraps uib-tooltip. I'm willing to go as far as jQuery to fix this issue however I read a post where apparently Chrome and Firefox have both disabled the ability to select and edit the default tooltips. Example:
<div role="form" ng-form="myForm" novalidate>
<div class="form-group">
<label>
<input type="text" id="Identifier" name="Identifier" ng-minlength="3" ng-maxlength="14" class="form-control" ng-model="$ctrl.Identifier" ng-required="true" uib-tooltip="{{ $ctrl.tooltips.identifier }}" tooltip-enable="myForm.Identifier.$invalid && myForm.Identifier.$touched">
</label>
</div>
</div>
Displays "Please fill out this field". How can I remove the default tooltip?
Thanks to this post by jscher2000 I was able to find a work around. Simply add a 'title' tag and set it's contents to an empty space. Simply passing in empty quotes doesn't work there must be at least 1 space between the quotes that's empty. Example:
<input type="text" name="Name" title=" ">
Thanks.
I have 2 related inputs in angular one is type number and the other is type text.
They both display the same value with the only difference being that the type text input displays the value of the type number input formatted for currency.
Only one of these is displayed at any given time. The behaviour I'd like is for the text input to be displayed initially and then on the click event the text input is hidden and the number input is shown. Similarly when the blur event happens on the number input the number input is hidden and the text input is shown.
The markup for this looks something like this:
<div>
<input type="number" ng-model="aValue" ng-blur="hideMeAndShowInputBelow">
<input type="text" ng-value="aValue | currency:'': '0'" ng-click="hideMeAndShowAndFocusInputAbove" readonly="readonly">
</div>
I know I could add extra properties to make this work but being relatively new to Angular this feels like the sort of thing that there is probably an elegant solution for.
Any help would be much appreciated.
You can assign a variable in ng-blur/ng-click and hide/show the inputs depending on the variable value.
<div>
<input type="number" ng-model="aValue" ng-show="showNumber" ng-blur="showNumber = false">
<input type="text" ng-value="aValue | currency:'': '0'" ng-show="!showNumber" ng-click="showNumber = true" readonly="readonly">
</div>
Check the plunker here:
https://plnkr.co/edit/yMFiXWuUF1R9BPGr2usT?p=preview
Alternatively, if this is a component you're going to use multiple times around your app, you could create a custom directive that achieves the same functionality, and thus avoid a lot of code duplication etc.
Try out something like this
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-success" type="text" ng-model="firstName" ng-show="display" ng-click="display=!display"> BUTTON 1</button>
<br />
<button class="btn btn-warning" ng-click="display=!display" ng-model="lastName" ng-show="!display"> BUTTON 2
</button>
</div>
DEMO
Thanks for the suggestions. I followed the same approach but because I had some additional requirements (I wanted the value to be focussed when switching to the edit mode so the user can edit immediately without having to click the input again) I ended up writing a directive. It's here:
PLUNKER
But here is the markup.
<div class="mt-flight-input" ng-class="{'mt-dirty': value.newvalue != value.initial, 'mt-zero': value.newvalue == 0}">
<input type="number" class="mt-input" placeholder="0" ng-show="value.isAuthoring" ng-model="value.newvalue" ng-blur="checkValue('blur', value)" ng-focus="checkValue('focus', value)">
<input type="text" class="mt-input" placeholder="0" ng-show="!value.isAuthoring" ng-value="value.newvalue | currency:'': '0'| comma2dots" ng-click="showEditor($event, value)" ng-focus="showEditor($event, value)" readonly="readonly">
</div>
I have a textbox for phonenumber and I need to enter the phonenumber in xxx-xxx-xxxx format in the textbox.
I have tried below examples but thy are not working
<input type='text' ng-model='nerecord.phonenumber' mask='xxx-xxx-xxxx'/>
<input type='text' ng-model='nerecord.phonenumber' ng-pattern='/^[1-10]\d{2}([.-]?)\d{3}\1\d{4}$/'/>
Can anyone help me. How to do this?
Seems your regex isn't correct.
try this one /^\d{3}-\d{3}-\d{4}$/
I don't see anything to handle the case your phone number is invalid.
try to render something like that :
<form name="myForm" ng-submit="yourSaveFunction()">
<p ng-class="{ error: !myForm.phoneNumber.$valid }"> <!-- You must handle your css with this class -->
<label ng-if="!myForm.phoneNumber.$valid">Phone Number not OK</label>
<input name="phoneNumber" type='text' ng-model='nerecord.phonenumber' ng-pattern='someRegex'/> <!-- idk anything about regex -->
</p>
<p>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</p>
UI Mask example:
<input ng-model="nerecord.phonenumber" ui-mask="999-999-9999" type="text"/>
Also if you have to validate the input then there is an option in config to prevent clearing the value on blur.
clearOnBlur: false
Mask.js
I am trying to submit the form on only successful validation.
validation is working for required but not working for ng-minlength
form input is invalid but form is still being submitted.
<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
<div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
<label class="control-label" for="mobile">Mobile</label>
<div class="controls">
<input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required />
<span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
<span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value ="submit" />
</div>
count: {{count}}<br />
<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
</div>
</form>
http://jsfiddle.net/pMMke/9/
what am I doing wrong.
I don't want to use submit button disable method.
This is what you are doing wrong: you are mixing two concepts, Angular validators and
HTML5 validators.
The required HTML5 validators, for instance, states that:
When present, it specifies that an input field must be filled out before submitting the form.
So, if you try to submit a form that has an input with this attribute, it will show a message explaining this to the user, and it will prevent the form from being sent. This is the behavior you want. Why isn't working for ng-minlength? Because ng-minlength is an Angular validator (you can tell because it begins with ng-), and it doesn't add any special behavior to the form. It simply set the input where it is located to invalid (and hence, the form), and let you decide what to do with it.
You have an option: you can use the pattern HTML5 validator, to specify the field requires at least 11 characters. It would like this:
<input type="text" pattern=".{11,}">
So when you submit a form containing this input, it will no be sent if the user has enter less than 11 characters.
But since we are it, and you are already using the pattern validator, you could use the regular expression in its full potential, and define something like:
<input type="text" pattern="07[0-9]{9}" />
Which will only admit values of 11 characters, that start by "07" and that contains only digits. I have modified your fiddle to show you how it would work: http://jsfiddle.net/helara/w35SQ/
I mistakenly used ngMaxlength="12" ngMinlength="6" instead of ng-minlength="6" ng-maxlength="12", it's working fine now.
Both ng-minlength & mg-maxlength works in AngularJS.
I've tested this in AngularJS version 1.3.
Make sure to use novalidate with <form> to disable browser's native validation.
This should work:
To enter mobile number
ng-show="myForm.mobile.$touched && myForm.mobile.$error.required"
For minimum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.minlength"
For maximum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.maxlength"
This work for me guys
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input ng-minlength="11" class="mdl-textfield__input" type="text" name="cpf" id="cpf" ng-model="avaliacao.cpf" ng-required="true" ng-pattern="/^\d+$/">
<label class="mdl-textfield__label" for="cpf">CPF *</label>
</div>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.required && myForm.cpf.$dirty">Field Required</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.pattern">Only numbers</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.minlength">Min 11 Chars</p>
I'm facing the same issue, and I think you can only disable the button or ignore the entered value by yourself. You can also check the $valid property in your controller and ignore the value... It is not so nice, but I found no other way.