I am trying to write a code to show characters count below the textarea field. I found many solutions for doing this but i don't know why its not working for me.
Here is the code what i am trying:
<div class="form-group border-0 describe mb-0">
<label for="describewishInput" i18n="##describewishLabel" class="text-capitalize">Describe Your Wish:</label>
<span ngbTooltip="Please describe your wish here"
placement="top" class="tt tt-bottom mt-1 mr-0"></span>
<textarea type="text" (ngModel)="yourWish" id="yourWish" class="form-control mb-1" maxlength="255" i18n-placeholder="##describeyourwish"></textarea>
<span class="pull-right char"><em>{{ 255 - yourWish.length }} characters left</em></span>
</div>
Here is the error i am getting
SignupFormComponent.html:121 ERROR TypeError: Cannot read property 'length' of undefined
at Object.eval [as updateRenderer] (SignupFormComponent.html:122)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
at checkAndUpdateView (core.js:13849)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)
Can you help me with this. Its very frustrating as i am working on it from 1 day.
Thanks in Advance.
You need to use two way data binding [(ngModel)] ,
<textarea type="text" [(ngModel)]="yourWish" id="yourWish" class="form-control mb-1" maxlength="255" i18n-placeholder="##describeyourwish"></textarea>
STACKBLITZ DEMO
Related
How to put inline if in checked property on input in the vuejs?
this is my code
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="if (index==0):'checked'">
</div>
Igot error message : avoid using JavaScript keyword as property name: "if"
Raw expression: :checked="if (index==0) 'checked'"
This is how to do:
<div v-for="(element,index) in elements" :key="element.id" class="col">
<input type="radio" name="test[]" :value="element.id" :checked="index===0 ? true: false">
</div>
I'm looking for something like the code below to display a list of topics from the array right under the box where user adds them. (newest on top)
I know I can unshift instead of pushing to change the order topics are stored in the array but is there a way to keep the original array order and just reverse the displayed topics without triggering the
"[Vue warn]: You may have an infinite update loop in a component render function."?
<div class="field add-topic">
<label for="add-topic">Add a Topic (press Tab):</label>
<input type="text" name="add-topic" #keydown.tab.prevent="addTopic" v-model="newTopic">
</div>
<div v-for="(tpc, index) in topics.reverse()" :key="index">
<label for="topic">Topics:</label>
<input type="text" name="topic" v-model="topics[index]">
</div>
the slice method will create a copy of your array. Use it before reverse to only reverse the copy.
topics.slice().reverse();
<div class="field add-topic">
<label for="add-topic">Add a Topic (press Tab):</label>
<input type="text" name="add-topic" #keydown.tab.prevent="addTopic" v-model="newTopic">
</div>
<div v-for="(tpc, index) in topics.slice().reverse()" :key="index">
<label for="topic">Topics:</label>
<input type="text" name="topic" v-model="topics[index]">
</div>
More info : https://stackoverflow.com/a/30610528/5671919
I'm using a custom element to print the length of an input element. I got it working in a regular environment, but I have trouble creating unique refs in a repeat.for environment
I've tried using combinations of ref=name$index or ref=name${$index}, but none of them work so far.
In a non-repetitive environment, this works
<div class="row">
<label>
Name
<my-custom-element field.bind="name"></my-custom-element>
<input
type="text"
name="name"
ref="name"
value.bind="name"
maxlength="150" />
</label>
</div>
However, once I use repeat for, it stops working, cause I am using field.bind and ref wrongly. E.g.
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="name${$index}"></my-custom-element>
<input
type="text"
name="name${$index}"
ref="name${$index}"
value.bind="item.name"
maxlength="150" />
</label>
</div>
I'm just trying to make the ref look something like name0, name1, name2 etc, so that it is unique.
The error looks like Parser Error: Unconsumed token { at column 5 in expression [name${$index}]
You are iterating through items, which presumably is an array of objects having a name property. I think you want something more like the following:
<div repeat.for="item of items" class="row">
<label>
Name
<my-custom-element field.bind="item.name"></my-custom-element>
<input
type="text"
name="item.name"
ref="item.name"
value.bind="item.name"
maxlength="150" />
</label>
A work's client has reported an issue in our application when working with IE11.
On an specific form, sometimes, when opening it, if you type, the typed text won't show. If I open developer tools, it suddenly shows.
This is the rendered html belonging to that form:
<div class="col-sm-6 ">
<div class="form-group" data-ng-show="myform.txtPropietario.visible">
<label class="col-md-4 control-label my-show-hide-animation">Propietario:</label>
<div class="col-md-8">
<div class=" ">
<input name="txtPropietario" class="form-control text-left ng-pristine ng-valid" input-alpha-numeric="ES" onblur="this.value=this.value.toUpperCase();" data-ng-model="myform.values.txtPropietario" data-ng-disabled="myform.txtPropietario.disabled" type="text" step="0.01" maxlength="50" placeholder=" "></div>
<ul class="errores my-show-hide-animation ng-hide" data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$invalid && myform.procesado"><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.required" class="ng-hide"><span>Campo obligatorio</span></li><li data-ng-show="myform.seccionPanelPagoServiciosname.txtPropietario.$error.pattern" class="ng-hide"><span>El formato del dato ingresado no es válido.</span></li>
</ul>
</div>
</div>
</div>
The app work's over AngularJs and html is built over Bootstrap 3.
Any idea why is this happening?
It's hard to tell without seeing the CSS, however i encountered this issue a while back and fixed it by setting the height of the input box.
My theory is that IE didn't think there was enough height to show the text in the font size I had specified.
For example
<input type="text" id="example" style="height: 40px" />
I hope this helps.
I'm trying to add an input-addon to a form input using Bootstrap 3 but it doesn't display the errros correctly. This is my html code:
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="input-group">
<input type="text" id="addTax_rate" class="form-control">
<span class="input-group-addon">%</span>
</div>
The input group displays correctly without errors, but when I add the has-errors class to it, it comes to this:
What am I doing wrong? Thanks