<div *ngFor="let proc of procInputList" >
<label >{{proc.key_ | Capitalize}}</label>
<input id="{{proc.key_}}" name="inputparams" type ="text" class="form-control" required = "proc.r_q == Y ? required :none" />
</div>
But unfortunately its not working for me..and I don't want to use forms there.
To condition an attibute you can:
<input class="form-control" [required] = "proc.r_q == 'Y'" />
Related
I have some input controls where I am trying to bind the value by checking for null which doesn't worked
<input id="LastKnownLatitudeDegree" name="VesselMissing.LastKnownLatitudeDegree" value="#Model.VesselMissing != null ? #Model.VesselMissing.LastKnownLatitudeDegree : ''" class="form-control" max="89" min="0" step="1" type="number" data-dec="0"><span>°</span>
If I am using a null check on top of the control it is not getting visible to the user to enter the data
#if (#Model.VesselMissing != null)
{
<input id="LastKnownLatitudeDegree" name="VesselMissing.LastKnownLatitudeDegree" value="#Model.VesselMissing.LastKnownLatitudeDegree" class="form-control" max="89" min="0" step="1" type="number" data-dec="0"><span>°</span>
}
I have some bunch of controls like this where I need to bind the value field. There is an other method which I tried out is working but I would like to know if there is a possibility to do as per the first statement
This works but I have some 20 controls so I am considering to make it work as per the first statemet
#{
string LastKnownLatitudeDegree = string.Empty;
if(Model.VesselMissing !=null)
{
LastKnownLatitudeDegree = Model.VesselMissing.LastKnownLatitudeDegree;
}
}
<input id="LastKnownLatitudeDegree" name="VesselMissing.LastKnownLatitudeDegree" value="#LastKnownLatitudeDegree class="form-control" max="89" min="0" step="1" type="number" data-dec="0"><span>°</span>
In both cases you have syntax error.
<input id="LastKnownLatitudeDegree" name="VesselMissing.LastKnownLatitudeDegree"
value="#(Model.VesselMissing != null ? Model.VesselMissing.LastKnownLatitudeDegree : "")" />
or
#if (Model.VesselMissing != null)
{
<input id="LastKnownLatitudeDegree" name="VesselMissing.LastKnownLatitudeDegree" value="#Model.VesselMissing.LastKnownLatitudeDegree" class="form-control" max="89" min="0" step="1" type="number" data-dec="0"><span>°</span>
}
I am working with ejs and mongodb/mongoose and what I am trying to do is rendering the page passing the data to an input type="number" on value attribute, but it is not working.
This is the backend part of the code:
Produto.findOne({_id: requestedProduct}, function(err, produto){
res.render("produtosEditar", {
precoUnitario: produto.precoUnitario
});
});
And this is where I am trying to render it:
<input class="form-control mid-field" type="number" min="0" step="any" name="precoUnitario" value="<%= precoUnitario %> ">
The value stored in db is higher than 0.
When I change the input type to text, it works, but it doesn't when it is a type="number".
This is an edit data page.
Can you help bros?
Thank you!
I'm assuming your precoUnitario variable is a valid number. You need to remove the
extra space at the end of value="<%= precoUnitario %> ">.
You can see the demo below:
<!-- The extra space at the end of value makes it unvalidate -->
<input class="form-control mid-field" type="number" min="0" step="any" name="precoUnitario" value="1.5 ">
<!-- This works -->
<input class="form-control mid-field" type="number" min="0" step="any" name="precoUnitario" value="1.5">
I'm trying to use Model Binding on two properties, both of them with BindProperty to an IList.
I will Have X Cells, then for each selected cell (a bool in Cell Object), I have 1 Reference. So in a pratical example I have 21 Cells, 3 of them are selected, so I must select 1 Reference for each of those selected Cells. All good until here, but when entering my Post Handler The ILists in which I'm storing are merging up, in other words, data is storing in the same IList. So, when SelectedCells and SelectedReferences(see below) should have 21 and 3 objects respectively, they have both 21 and the properties with the same name (e.g Id) get overwritten.
If the Views are associated to both the different view models, shouldn't the IList's be recognized as different?
[BindProperty]
public IList<CellViewModel> SelectedCells { get; set; }
//Was trying to play with ModelBinder type to force them to be treated as different types, unsuccessfully
//[ModelBinder(BinderType =(typeof(ReferenceViewModel)))]
[BindProperty]
public IList<ReferenceViewModel> SelectedReferences { get; set; }
Views
Cells
#model IList<NoPaper.ViewModels.CellViewModel>
<if include-if="Model.Count == 0">
<alert type="Warning">
Não existem células nesta unidade de produção
</alert>
</if>
<if include-if="Model.Count > 0">
<div class="list-group list-group-horizontal row">
#for (int i = 0; i < Model.Count(); i++)
{
<if include-if='Model[i].CellCategoryDescription == "Célula Robot" '>
<div class="list-group-item list-group-item-action text-center col-md-2" style="cursor:pointer;">
<input type="hidden" class="cell-value" asp-for="#Model[i].Id" />
<input type="hidden" class="cell" asp-for="#Model[i].IsSelected" />
#Model[i].Name<text style="font-weight:bold;">(R)</text>
</div>
</if>
<if include-if='Model[i].CellCategoryDescription == "Célula Manual" '>
<div class="list-group-item list-group-item-action text-center col-md-2" style="cursor:pointer;">
<input type="hidden" class="cell-value" asp-for="#Model[i].Id" />
<input type="hidden" class="cell" asp-for="#Model[i].IsSelected" />
#Model[i].Name<text style="font-weight:bold;">(M)</text>
</div>
</if>
}
</div>
</if>
References
#model IList<NoPaper.ViewModels.ReferenceViewModel>
<if include-if="Model.Count == 0">
<alert type="Warning">
Não existem referências nesta unidade de produção
</alert>
</if>
<if include-if="Model.Count > 0">
<div class="justify-content-center">
#for (int i = 0; i < Model.Count(); i++)
{
<div class="form-row">
<div class="form-group ">
<text>#Model[i].CellId</text>
<label asp-for="#Model[i].myId"></label>
<select asp-for="#Model[i].myId" asp-items="Model[i].ReferencesSL" class="custom-select">
<option value="">--</option>
</select>
<span asp-validation-for="#Model[i].myId" class="text-danger"></span>
</div>
</div>
}
</div>
</if>
You can try to add name attribute to your input,.net core bind data with name attribute.For example,if you want to bind SelectedCells:
<input type="hidden" class="cell-value" asp-for="#Model[i].Id" name="SelectedCells[#i].Id"/>
if you want to bind SelectedReferences:
<input type="hidden" class="cell-value" asp-for="#Model[i].Id" name="SelectedReferences[#i].Id"/>
I'm new to Vue, and can't achieve quite a simple thing. I want to be able to use the loop index to set a unique name for an attribute. For example, I want to set the ID attribute to something like this: id="somename{{index}}", but that gives an interpolation inside attributes error.
<div v-for="(dt, index) in driveTrain" >
<input type="radio" id="driveTrain-{{index}}" >
<label for="driveTrain-{{index}}">{{dt}}</label>
</div>
you can bind the id dynamically using v-bind directly:
<div v-for="(dt, index) in driveTrain" >
<input type="radio" :id="'driveTrain'+index">
<label :id="'driveTrain'+index">{{dt}}</label>
</div>
Or:
bind it using template literals :
<div v-for="(dt, index) in driveTrain" >
<input type="radio" :id="`driveTrain${index}`">
<label :id="`driveTrain${index}`">{{dt}}</label>
</div>
<input
#valueRef
tabindex="1"
type="number"
step="1"
name="value"
id="value"
placeholder="Enter value"
class="form-control"
formControlName="value"
[ngClass]="{ 'is-invalid': submitted && adjForm.controls['value'].errors && !this.data.isAdjAccount }"
/>
I set input step as 1, but it still supports to input decimal, what I want to show is: when you open this from, and enter value in this input box, it forbids user to enter decimals, only integer is valid.
Try this
<input type="text" class="form-control" placeholder="Enter value" id="txtvalueRef" name="valueRef" #valueRef="ngModel" pattern="[0-9]*">
<div [hidden]="valueRef.valid || valueRef.pristine" class="alert alert-danger">
<div [hidden]="!valueRef.hasError('pattern')">Items should be only numbers</div>
</div>