I have a simple form that I wish to POST to my server. The bindings in AngularJS work except on my select. On my select I'm not getting a value:
Here is my markup:
...
<div id="divAccountName" class="isNotAvailable">
<label for="inputAccountName">Account Name:</label>
<input name="inputAccountName" required type="text" data-ng-model="register.accountName" data-ng-blur="checkAccountAvailability($event)" />
<span></span>
</div>
<div class="account">
<label for="inputAccountType">Account Type:</label>
<select name="inputAccountType" data-ng-model="register.accountType" data-ng-options="a.Type for a in accountTypes.value" required>
<option value="" data-ng-if="false"></option>
</select>
<span></span>
</div>
<div class="recaptcha">
<div id="contact-recaptcha" class="g-recaptcha"></div>
</div>
<div>
<input type="submit" value="Register" data-ng-click="registerUser(register)" />
</div>
The register object that gets passed to registerUser() has all my input values except the select value. So when I $resource.save() it to my webserver the value for register.accountType is null.
The account types are populating correctly from my controller, so they are selectable.
Hi Hope this plunker will help you
<select name="inputAccountType" data-ng-model="register.accountType" data-ng-options="a.name for a in accType track by a.type" required="">
Plunker
Related
I have recently migrated from Angular 9 to Angular 12 and observing form control value issue. Below are the details of the issue:
I have a dropdown control, based on the value selected there are
controls which has to update the value according to my model,
When value of dropdown control is changed , my dependent controls
value is not updating according to the model, in code debug my form
is having the value based on the changes done to drop down, even
though this.form.updateValueAndValidity(); applied, changes are not
reflected in the UI.
Here is the HTML file
<div class="form-control">
<label class="form-control-label" for="type">Type</label>
<select id="type" name="Selection" formControlName="Type">
<option value="null" selected="true" id="default">Select type...</option>
<option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{item.ShortName}}</option>
</select>
</div>
//Below controls are dependent on the above value selected, for each selection change different values to be display
<div class="form-control">
<label class="form-control-label" for="type">Type</label>
<select id="type" name="Selection" formControlName="Type">
<option value="null" selected="true" id="default">Select type...</option>
<option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{{item.ShortName}}</option>
</select>
</div>
<div>
<div class="form-control tooltip">
<label class="form-control-label" for="name">Name</label>
<div class="tooltip">
<input type="text" maxlength=13 formControlName="Name" id="name">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="age">Age</label>
<div class="tooltip">
<input type="text" formControlName="Age" NumberOnly="true" id="age">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="Height">Height</label>
<div class="tooltip">
<input type="text" formControlName="Height" NumberOnly="true" id="height">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="weight">Weight (kg)</label>
<div class="tooltip">
<input type="text" NumberOnly="true" formControlName="Weight" id="weight">
</div>
</div>
</div>
file which has to update the value
this method is for updating my form contols
updateControls(show: boolean, formMeta: object, data?: { [key: string]: string })
{
Object.keys(formMeta).forEach((formName) =>
{
if (!show)
{
//remove control if none selected
this.form.removeControl(formName);
return;
}
//add controls on value change and update the controls
this.form.addControl(formName, formMeta[formName]);
this.form.get(formName).patchValue(data[formName]);
});
this.form.updateValueAndValidity(); //update my form, but it doesn't reflect the updated content in UI
}
I'm creating a form where the user can add their modules that they study at university. When they click the button, it adds a new set of fields for another module. I've added a click listener to the button #add and I'm trying to append the form #input_form with the same fields:
<form id="input_form">
<h6>Add modules below...</h6>
<div class="form-row">
<div class="col-md-6">
<input type="text" class="form-control" name="module_name" placeholder="Module Name">
</div>
<div class="col-md-6">
<input type="text" class="form-control" name="module_code" placeholder="Module Code">
</div>
</div>
<div class="form-group col-md-6">
<label for="credit_entry"># of Credits: </label>
<input type="number" name="credits" id="credit_entry">
</div>
<div class="form-group col-md-6">
<label for="colour_selector">(Optional) Choose a Colour: </label>
<select id="colour_selector" name="colour_select">
<option value="blue">Blue</option> <!-- Default -->
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="pink">Pink</option>
<option value="black">Black</option>
</select>
</div>
</div>
<div class="row">
<button name="add" id="add" class="btn btn-secondary">Add Another</button>
</div>
// Add fields dynamically
$("#add").click(function() {
$("#input_form").append("<h1>The fields will go here</h1>");
});
When I click the button, I see the content (the h1) added for a split second but then it disappears. I am not sure why the appended HTML won't stay on screen. I have another part of this project which works similarly and appends to a ul list and the HTML is persisting on screen for that just fine, but for some reason this won't.
I'm pretty new to web design and jQuery so sorry if there's an easy answer that I'm missing.
"If the element has a form owner, the element must submit the form owner from the button element." (w3.org)
That means, any button inside a form executes submit() on its parent form.
To prevent that, explicitly define the button type as button:
<button name="add" type="button" id="add" class="btn btn-secondary">Add Another</button>
In action:
https://codepen.io/akamichael/pen/NWqgaWz?editors=1010
qr.php
<form id="contactForm" class="forma" method="post">
<h1 id="datah1">Your data</h1>
<div class="formcontainer">
<hr class="hr3"/>
<div class="container">
<label for="uname" id="fullnameofres"><strong>Full name of your restaurant</strong></label>
<input type="text" name="textfieldtest" id="user_value" placeholder="Full name of your business.." name="user_value" required>
<label for="psw"><strong>Number of tables</strong></label>
<input type="text" id="nr_tables" placeholder="How many tables you have..." name="nr_tables" required>
<hr class="hr1">
<div id="templatesDiv">
<label for="psw"><strong>Template</strong></label>
<button id="tmplt_btn" onclick="go_to_templates_grid()" style="margin-bottom: 15px">Click here for all templates </button>
</div>
<div>
You selected : <b> <span id="templateResult" name="templateResult"> </b>
</div>
<hr class="hr2">
<label for="psw"><strong>Do you have menu</strong></label>
<!-- <input type="text" id="menu_choice" placeholder="Yes/No" name="menu_choice" required> -->
<select name="menu_dropdown" id="menu_dropdown">
<option value="None" selected disabled > Yes/No </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<button type="submit" id="submitara" name="submit">Submit</button>
</form>
Expected behaviour: The user fills in the fields, after clicking on 'Click here for all templates', another php file being opened, user is choosing Template, back to qr.php, submit form and that's all.
The problem is that all data which was typed in text fields being cleared after clicking on 'Click here for all templates'.
The default type for a button is submit, so when you click that button, you are submitting the form. Add: type="button" to the button code so that it will just run your function but not submit.
<button type="button" id="tmplt_btn"
onclick="go_to_templates_grid()"
style="margin-bottom: 15px">Click here for all templates </button>
I have multiple checkboxes for a question.Atleast one checkbox needs to be selected.If none of the checkboxes get selected form should through validation error.Did i miss anything. Any ideas on how I would be able to achieve this behaviour?
My .JS code:
$scope.onCheckBoxSelected=function(){
var flag=false;
for(var key in selectedOptions){
console.log('Key -' +key +' val- '+selectedOptions[key]);
if(selectedOptions[key]){
flag=true;
}
}
if(!flag){
selectedOptions=undefined;
}
};
below is my html code :
<div class="grid">
<div class="col flex-10 mandatoryField" ng-class="{error: (!selectedOptions && formMissingFields)}">Hello please select atleast one</div>
<div class="col flex-2">
</div>
<div class="col flex-5">
<div style="padding-top: 2px">
<input type="checkbox" name="apple" title="Select type" value="apple" ng-model="apple" ng-change="onCheckBoxSelected()">apple
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="orange" title="Select type" value="orange" ng-model="orange" ng-change="onCheckBoxSelected()">orange
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="banana" title="Select type" value="banana" ng-model="banana" ng-change="onCheckBoxSelected()">banana
</input>
</div>
</div>
</div>
You can keep it simpler, without the need of the ngChange event.
<div ng-class="{error: !apple && !orange && !banana">Hello please select atleast one</div>
It's best practice to use the AngularJS forms for checkbox validation - it will also help you if you intend on extending your form. You will have to refactor your code to use this functionality.
<ng-form name="myForm">
<span style="color:red;" ng-show="myForm.$invalid">Please select one</span>
<br />
<!-- your checkbox values will be in "choices" -->
<p ng-repeat="choice in choices">
<label class="checkbox" for="{{choice.id}}">
<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" ng-required="value.length==0" /> {{choice.label}}
</label>
</p>
<input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
</ng-form>
See this fiddle - note that it uses underscore.js. Also, this question may help.
I am trying to post my Angular form to my Post method in my Api Controller :
<div data-ng-app="app" ng-controller="FixtureAddController">
<form name="form" class="col-xs-2" id="form" class="form-horizontal">
<div class="control-group" ng-class="{error: form.StageName.$invalid}">
<label class="control-label" for="StageName">Stage Team</label>
<div class="controls">
<select class="form-control" ng-model="fixture.StageName" ng-options="stage.StageName as stage.StageName for stage in stages" required>
<option style="display:none" value="">Select</option>
</select>
<span ng-show="form.StageName.$dirty && form.StageName.$error.required">Stage required</span>
</div>
</div>
....other fields....
<div class="form-actions">
<button ng-show="form.$valid" ng-click="save()" class="btn btn-primary">{{action}}</button>
Cancel
</div>
</form>
</div>
Whether I set ng-model to fixture.StageName or fixture.StageId, it always passes the StageName to my Post method, but I need it to pass the StageId. How do I get the Id to be passed?
Try changing ng-options as well to use StageId.
See also: Working with select using AngularJS's ng-options
try this:
ng-options="stage.StageId as stage.StageName for stage in stages"