I want to convert following HTML code to Angular code using *ngFor
<div>Children: <input type="radio" id="1" name="children" [value]="1" [(ngModel)]="this.children"/>1
<input type="radio" id="2" name="children" [value]="2" [(ngModel)]="this.children"/>2
<input type="radio" id="3" name="children" [value]="3" [(ngModel)]="this.children"/>3
You have {{this.children}} children
</div>
Angular code
<div>Children: <input *ngFor = "let option of selectOptions" type="radio" id=option name="children" [value]=option [(ngModel)]="this.children"/>{{option}}
You have {{this.children}} children
</div>
selectOptions is defined in Component's class as follows:
selectOptions:Array<number>=[1,2,3]
I can see error for {{option}} that Angular: Identifier 'option' is not defined. The component declaration, template variable declarations, and element references do not contain such a member
I also see error for id=option name="children" that tag start is not closed.
What am I doing wrong?
I used your code like this:
<div>Children: <input *ngFor = "let option of selectOptions" type="radio" id={{option}} name="children" [value]=option />{{option}}
You have {{this.children}} children
</div>
It worked with this result:
Generated this html:
It seems one issue is that option goes out of scope once input tag is closed. If I move *ngFor to div then I get the labels. But they are now displayed vertically, not horizontally. This code works but with vertical alignment <div *ngFor = "let option of selectOptions"> <input type="radio" [id]="option" name="children" [value]=option [(ngModel)]="this.children">{{option}} </div>
For horizontal alignment, this worked. Instead of repeating div, I repeated label. label wraps the input so option is in scope of input - <div > <label *ngFor = "let option of this.selectOptions; let ind=index"> <input type="radio" [id]="option" name="children" [value]=option [(ngModel)]="this.children"> {{option}} </label> </div>
Related
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>
I'm trying to use the debounce binding behaviour on a list of checkboxes, but it doesn't seem to be working the way I expect (I'm not sure if you can even debounce a checkbox):
<label repeat.for="v of values">
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
clicking on any of the checkboxes results in the checkedVal array updating immediately, whereas it works as I expect for a normal input:
<input type="text" value.bind="textVal & debounce:1000"/>
Can I debounce a checkbox input?
Here's the full code, with a GistRun here.
app.html:
<template>
<h1>Checkbox bind debounce</h1>
<form>
<label for="text">text input with debounce:1000 </label>
<input type="text" value.bind="textVal & debounce:1000"/>
<div repeat.for="v of values">
<br/>
<label>
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
</div>
</form>
<br/>
<p>Text value: ${textVal}</p>
<p>Checked values:</p>
<p repeat.for="v of checkedVal">${v}</p>
</template>
app.js:
export class App {
values = [1, 2, 3];
checkedVal = [];
}
Thanks!
At this time, it's not supported. The debounce binding behavior controls the rate at which the checkedVal property is assigned. In a checked binding, the property isn't assigned, the array instance referenced by the property is mutated with push and splice which circumvents the debouncing in the binding expression.
I have previously successfully implement this behaviour but for some reason it's not working. I am fairly new to Vue.js and I might be missing something.
I have two radio buttons as such:
<div class="radio">
<label>
<input type="radio" name="loginRadio" id="frmLoginRadio" value="true" v-model="loginRadio" checked>
No, I am new to this site
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="loginRadio" id="frmRegisterRadio" value="false" v-model="loginRadio">
Yes, my password is:
</label>
</div>
They both have a v-model of loginRadio which is initially set to false. When the second radio button is clicked, the disabled input button below should be enabled again.
<input type="password" class="form-control" name="password" :disabled="loginRadio">
However, for some reason, the only thing that is happening is this (when I used Chrome Debug)
<input type="password" class="form-control" name="password" disabled="false">
and the element stays disabled. What am I doing wrong?
You did not use v-bind:for the value attribute of the input buttons
Therefore, loginRadio does not contain boolean values true or false (depending on selection), but strings: "true" and "false"
it should be enough to properly bind the value attribute on both input buttons:
:value="true"
:value="false"
I am working on an old application using Struts 1. We are using nested tags. For below code:
<nested:form action="/save.do?method=save">
<h2>Indexed Property Example</h2>
<nested:iterate property="lines" indexId="idx">
Name: <nested:text property="name" indexed="true"/>
Town: <nested:text property="town" indexed="true"/>
<nested:iterate property="inches" indexId="j">
Inch: <nested:text property="length" indexed="true"></nested:text>
</nested:iterate>
</nested:iterate>
<nested:submit value="save" />
</nested:form>
I am getting below html:
<h2>Indexed Property Example</h2>
Name: <input name="nestedForm[0].lines[0].name" value="" type="text">
Town: <input name="nestedForm[0].lines[0].town" value="" type="text">
Inch: <input name="nestedForm[0].lines[0].inches[0].length" value="0" type="text">
Inch: <input name="nestedForm[1].lines[0].inches[1].length" value="0" type="text">
<input name="" value="save" type="submit">
If you see in second Inch label we have nestedForm[1] it should be 0. I have to change to this data and submit back to server. If I change it directly in html struts populate all objects automatically. Can anyone suggest me if I am doing anything wrong here.
i have this website im building, my client is using a template and the template has contact forms, now i cant seem to understand how to get the text fade on click for input fields to work on any additional fields i make on top of what was there on the template.
http://daniloportal.com/NPC2/contact.html
on that page take a look at the form, the values with *'s disappear but the clone EMAIL input i made doesnt cause i took the * off the value.
Ive been going crazy trying to figure out where this is being configured on the page, If any inspect elementors can take a look and let me know i would greatly appreciate it!
this is the code snip
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email *" title="Email *" />
<input type="text" name="email" value="Email " title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
Search your code to find what makes the input's value disappear. E.g., look for behavior that clears the value of form fields (either element.value = '' if using plain javascript, or element.val('') if using jquery).
Then you can see what is the condition to clearing it. In your case, seems that the condition is that the input's value is equal to it's "title" attribute (you can edit both using "Inspect Element" in Chrome).