I'm using md-checkbox in a FormArray.
private protocolArray: FormArray = new FormArray([
new FormControl('tcp'),
new FormControl('udp')
]);
<div class="form-group" formArrayName="protocol">
<md-checkbox formControlName="0" [checked]="true">TCP</md-checkbox>
<md-checkbox formControlName="1" [checked]="false">UDP</md-checkbox>
</div>
When it renders both are checked by default. If I get rid of the md-checkbox and make it a normal input type="checkbox" things render perfectly.
What gives?
I discovered that FormArray only takes boolean values so by instantianting it with 'tcp' or 'udp' it type casted them to true. I had to tweak my code to work around it, but creating the array with true or false fixed it.
Final code:
private protocolArray: FormArray = new FormArray([
new FormControl(true),
new FormControl(false)
]);
<div class="form-group" formArrayName="protocol">
<md-checkbox formControlName="0" >TCP</md-checkbox>
<md-checkbox formControlName="1" >UDP</md-checkbox>
</div>
Related
I am dynamically clearing the errors of my reactive form like:
this.courseForm.setErrors(null);
But the errors are still displayed in my template:
<form [formGroup]="courseForm" autocomplete="off">
<div class="alert-group" *ngIf="submitted && formGroup.errors?.coursedates">
<div *ngFor="let err of formGroup.errors?.coursedates?.value" role="alert" class="error">
{{err}}
</div>
</div>
</form>
Is there a way to clear formgroup errors in template as well?
thanks
Errors for each control doesn't populate for formgroup errors. So clearing formgroup errors doesn't remove the errors from each of its form-controls.
We need to setErrors(null) for each control inside formgroup. Here is how we do it.
Object.keys(this.courseForm.controls).forEach(key => {
this.form.get(key).setErrors(null);
});
Make sure to mark it as answer if the solution fixes your issue.
I am trying to change the "asp-action= ", unfortunately I could not find anything on the internet...
Currently I am working with a ViewBag where I can select a value from that list.
What I want is: I want to put that selected value from the ViewBag in the "asp-action= ( here ) "
Image of my index
Image of my Post method
<form method="post" enctype="multipart/form-data" asp-controller="Parser" asp-action= "PostDrone">
<div class="col-md-10">
<p>Upload one or more files using this form:</p>
<select asp-items="#(new SelectList(#ViewBag.listofitems ))"></select>
<input type="file" name="files" multiple />
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input type="submit" value="Upload" />
</div>
</div>
For example:
I want the "asp-action=" have the string value "PostSchoen" if I selected PostSchoen from the viewbag selectlist
I hope it is understandable what i said
What you wants to do it should doing by client side development with JS
But you have three ways:
1) You can change it by using JS
here an example with Jquery
need add it to onReady function this will change action to option val
<script>
$(function() {
$("select").change(function (){
//set form action to option val or get to whatever you need
$(this).closest("form").attr("action",$(this).val());
});
});
</script>
2) Send data to one contoller method then switch it by your select or other options
change in view
<select name="typeOfUploading" asp-items="#(new
SelectList(#ViewBag.listofitems ))"></select>
change in controller
PostDrone(List<IFromFile> files, string typeOfUploading)
{
//and use typeOfUploading this will be selected value from your select list
}
3) Firstly provide for user this data send choise, that generate him correct view with needed action
I have an ASP.NET MVC site and I am trying to get knockout-mvc working with it.
I have created a View Model in the C# code called Refund that contains among other things a Voucher called Vouchertype and a List<Country> called Countries. Voucher has a variable of type int called VoucherNumber
This View Model is passed into a strongly defined view Refund\Index
I am trying to get knockout-mvc to bind the values in Refund.Voucher.VoucherNumber to a textbox, and the Values in Refund.Countries to a drop-down list. On the controller I have hardcoded the values of Voucher.Vouchernumber and added two countries to the Country list.
Here is my View Code:
#using Resources
#using PerpetuumSoft.Knockout
#model MVC.Models.RefundViewModel
#{
var ko = Html.CreateKnockoutContext();
}
<div id="refundformcontainer">
<div id="headersection">
<div id="pagetitlecontainer">#Language.RefundVouchers</div>
<div id="helpercontainer">
<label id="lblhelper">To begin enter a voucher number or scan a barcode</label>
</div>
</div>
<div id="vouchercontainer">
<div id="voucherdetailscontainer">
<h5>#Language.VoucherDetails</h5>
<div id="vouchernumbercontainer" class="initialvoucherfield">
#Html.LabelFor(x=>x.Voucher.VoucherNumber)
#ko.Html.TextBox(x=>x.Voucher.VoucherNumber)
</div>
<div id="countrycontainer" class="initialvoucherfield">
#Html.LabelFor(x=>x.Voucher.Country)
<select ko.Bind.Options(x=>x.Countries).OptionsText("Name").OptionsValue("CountryId").Value(x=>x.Voucher.CountryId) ></select>
</div>
</div>
</div>
</div>
#ko.Apply(Model);
When the page loads, neither controls are bound to.
When I look at the generated source the following code is generated
<script type="text/javascript">
var viewModelJs = {"Refund":null,"Voucher":{"VoucherId":0,"VoucherNumber":123456789,"Country":null,"CountryId":0,"Retailer":null,"RetailerId":0,"PurchaseDate":"0001-01-01T00:00:00","CustomsStampDate":null,"InvoiceNumber":"","LineItems":[],"TotalPurchasePrice":0.0},"Countries":[{"CountryId":380,"Name":"Italy"},{"CountryId":724,"Name":"Spain"}]};
var viewModel = ko.mapping.fromJS(viewModelJs);
ko.applyBindings(viewModel);
</script>
knockout-2.2.0.js and knockout.mapping-latest.js are both included in the page
The error I am getting is
0x800a139e - JavaScript runtine error: Unable to parse bindings
Message: [Object Error]
Bindings value: Voucher().VoucherNumber
I then changed the Refund View model so it had a property VoucherNumber and had the textbox reference this instead of the Voucher.VoucherNumber property
#ko.Html.TextBox(x=>x.VoucherNumber)
When I ran this I got the same unable to parse bindings error, but this time for the country
Bindings value: options : Countries, optonsText : Name, optionsValue : CountryId
Does anybody have any idea what is causing this?
i think, this should work.
<select #ko.Bind.Options(x=>x.Countries).OptionsText("'Name'").OptionsValue("'CountryId'").Value(x=>x.Voucher.CountryId) ></select>
I am developing a MVC app.
I have amount fields in my form and I am able to put amounts in Indian decimal style
with help of the following code.
#{
var indianCulture = new System.Globalization.CultureInfo("hi-IN");
#string.Format(indianCulture, "{0:N}", item.SanctionedAmount)
}
Now I have a line of code where I don't use the item.
<div class="span7">
Net Payment
</div>
<div class="span4" id="NetPayment" style="text-align:right;">
<strong><label for="NetAmt2" > </label></strong>
</div>
The NetAmt2 value I get from the script.
I want to implement culture info to that label, how to do this?
You can use this way:
<%: Html.Label(string.Format(indianCulture, "{0:N}", item.SanctionedAmount)) %>
<div class="sortable-sections">
<fieldset class="section draggable" id="flSectionType">
<div class="btn-drag section-handle hidden-view">
</div>
<div class="section-header">
<span class="section-label">Job Requirements</span> <a class="section-info" href="#more-info"
title="Minimum Education, Minimum Work Experience, Required Licenses/Certifications, Required Skills, Knowledge, and Abilities needed to perform the job.">
?</a>
</div>
<div class="sortable-items">
</div>
<a class="section-add-item hidden-view" id="addJR" href="#add-item" data-item='{"id":"addJR","template":"requirement","item_type":"Job Requirement"}'>
Add a new Job Requirement</a>
</fieldset>
<fieldset class="section draggable">
</fieldset>
<fieldset class="section draggable">
</fieldset>
<div>
The above code will generate a list of sections which can be dragged with in the sortable-sectons.
I am using the following script to remove sections manually and adding it back to sortable-sections, but it is not registering the jquery events.
var $section = $('.sortable-sections').find($('#flSectionType');
$('.sortable-sections').find($('#flSectionType').remove();
......
.......
$('.sortable-sections').append($section.val());
After appending the section, the event which are registered for the section-add-item css classes are not triggering.
Note:
instead of "on" used the "live" method. but it is not holding all attributes.
Edit:
Event code:
$('.section-add-item').on('click', function (e) {
that.addSection(this);
e.preventDefault();
});
instead of drag and drop, manually i am ordering the section on initial load.
.section-add-item must already exist when adding the event and the usage of on is wrong
$('body').on('click', '.section-add-item', function (e) {
});
instead of the body you can add another parent of .section-add-item that already exists before .section-add-item is created.