I get the 'safe is undefined' error interacting with html, after it has been inserted dynamically into a page via an AJAX call. E.g. When an option is chosen on a select within this html this error is thrown, and select resets to default value. I'm guessing this has something to do with the dynamically inserted content not being added correctly to the scope, even though i am performing the compile operation
Initializing questionForm on $scope in the controller:
$scope.questionForm = {};
The compile operation being performed in the success block of the AJAX call:
var requestQuestions = response.trim();
var template = angular.element('<ng-form name="questionForm">'+requestQuestions+'</ng-form>');
var linkFn = $compile(template);
var element = linkFn($scope);
$(".form-horizontal").append(element);
The dynamically inserted html(after compile has been run):
<ng-form name="questionForm" class="ng-scope ng-dirty ng-invalid ng-invalid-required">
<div ng-class="{'alert alert-danger': questionForm['question_18'].$invalid && data.attempted}" class="form-group question alert alert-danger">
<label class="col-sm-3">
1. What sort of role is this
</label>
<div class="col-sm-9">
<div class="question_box">
<div class="row">
<div class="col-md-11"><select required="required" ng-model="data.application.questions[18]" data-placement="left" data-toggle="tooltip" class="form-control dropdown-question ng-dirty ng-invalid ng-invalid-required" name="question_18"><option value="" disabled="disabled" selected="selected">Please select an option</option><option class="question-item" data-desc="" value="16">Full Time</option><option class="question-item" data-desc="" value="17">Part Time</option><option class="question-item" data-desc="" value="18">Contract</option></select></div><div class="col-md-1 e-padding-5">
<span id="dropdown-tooltip" title="" data-placement="right" data-toggle="tooltip" class="glyphicon glyphicon glyphicon-info-sign hide">
</span>
</div>
</div>
</div>
</div>
<span ng-show="questionForm['question_18'].$error.required && data.attempted" class="help-block">Required</span>
</div>
<div ng-class="{'alert alert-danger': questionForm['question_19'].$invalid && data.attempted}" class="form-group question">
<label class="col-sm-3">
2. Why is this role required to be filled?
</label>
<div class="col-sm-9">
<div class="question_box"><textarea ng-model="data.application.questions[19]" class="form-control ng-pristine ng-valid" name="question_19"></textarea></div>
</div>
<span ng-show="questionForm['question_19'].$error.required && data.attempted" class="help-block ng-hide">Required</span>
</div>
The strange thing is validation on these form elements actually works, will throw an error if the field is required and not filled in. example validation code:
<div ng-class="{'alert alert-danger': questionForm['question_19'].$invalid && data.attempted}" class="form-group question">
Any help would be appreciated. version of angular is 1.2.16
Modifying the form validation in the ngclass sections to reference the sub form elements correctly e.g. :
ng-class="{'alert alert-danger': questionForm.question_18.$invalid && data.attempted}"
2 Adding a watch in a directive which checked for the presence of a new child node within the div with the directive, if new length of child nodes was greater than previous length, compile html, updating the model
app.directive("requestQuestions",function($compile,$timeout){
return {
//restrict:"E",
// terminal:true,
priority:1000,
link:function(scope,element,attrs){
scope.$watch(function () { return element[0].childNodes.length; },
function(newVal,oldVal) {
if(newVal !== oldVal) {
// if the new value is greater than one , need to remove the existing node
if(newVal > 1)element[0].removeChild(element[0].childNodes[0]);
$compile(element)(scope);
}
});
}
};
});
Related
I have a set of radio buttons. If a user selected the value "yes" I want to show an additional box on the form.
https://stackblitz.com/edit/angular-4bgahw?file=src/app/personal/personal.component.ts
HTML.component
<div formGroupName="radioButtonsGroup" class="form-group col-6 pl-0 pt-3">
<div class="form-check-inline" *ngFor="let item of personal.radioButtonsdata">
<label for="{{item.section}}" class="col-12 customradio"
><span>{{item.section}}</span>
<input [value]="item" id="{{item.section}}" type="radio" formControlName="selectedButton"/>
<span class="checkmark"></span>
</label>
</div>
<!-- <div class="col-md-8" *ngIf="selectedButton.control.item === 'yes'"> --> //my attempt to target above input value
<div class="col-md-8" >
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
</div>
Can anybody get this to work and show me what I am doing wrong here please?
You need to access the value of the form control:
*ngIf="form.get('radioButtonsGroup.selectedButton').value.section === 'yes'">
STACKBLITZ
Everything you write in the template is resolved against the corresponding class (or against template variables), so you have to refer to the JavaScript control like this:
*ngIf="form.controls['selectedButton'].value === 'yes'"
Call a function to set flag based on value of the radio button, (ngModelChange)="onRadiochange($event)"
Try like this:
Working Demo
.html
<input [value]="item" (ngModelChange)="onRadiochange($event)" id="{{item.section}}" type="radio" formControlName="selectedButton" />
<div class="col-md-8" *ngIf="showTitle">
<input type="text" formControlName="title" class="form-control" placeholder="Title">
</div>
.ts
onRadiochange(e) {
if(e.section == 'yes'){
this.showTitle = true
} else {
this.showTitle = false
}
}
It can also be done in one line like this:
<input [value]="item" (ngModelChange)="$event.section == 'yes' ? showTitle=true:showTitle=false" id="{{item.section}}" type="radio" formControlName="selectedButton" />
Whenever yes checkbox is selected, you have to display the title textbox.
In that case, change your code like this.
In personal.component.ts, add this variable.
yesSelected: boolean = true;
Also in ngOnInit(),
this.form.valueChanges.subscribe(val=>{
if(val.radioButtonsGroup.selectedButton.section === "yes")
this.yesSelected = true;
else
this.yesSelected = false;
});
In personal.component.html, rewrite your if condition like this.
<div class="col-md-8" *ngIf="yesSelected">
<input type="text" formControlName="title" placeholder="Title">
</div>
These changes will show the title textbox only when the yes check box is selected.
I have a page with a list of li elements, each called .section. The page starts with just one section, but the user can add more with a click. Each section has a dropdown called .wip-location and three input fields called .section-number, .section-name, and .section-description. (The -number and -description inputs are irrelevant but I included them here just in case they are causing problems.)
Every time the dropdown is changed, I'd like the selected text to get filled into the .section-name input.
This works the first time (when there is only one .section, .wip-location, and .section-name on the page), but as soon as the user adds more .sections, it appears that Jquery is unable to figure out which element to act upon, and no inputs are filled.
HTML
<li class="section">
<div class="form-group row">
<label class="col-sm-2 text-sm-right">Section Number</label>
<div class="col-sm-7">
<input class="section-number" type="number" step="0.01" min="1" />
</div>
<label class="col-sm-2 text-sm-right">Section Name</label>
<div class="col-sm-7">
<input class="section-name" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 text-sm-right">Section Description</label>
<div class="col-sm-7">
<textarea class="section-description" />
</div>
<label class="col-sm-2 text-sm-right">WIP Location</label>
<div class="col-sm-7">
#Html.DropDownListFor(m => m.WipLocation,
new SelectList(Model.WipLocations, "Key", "Value"),
"-- select --",
new { #class = "wip-location" })
</div>
</div>
</li>
jQuery
// Automatically add Wip Location choice to Section Name input
$('.wip-location').change(function () {
var $location = $('option:selected', $(this)).text();
var $section = $(this).closest('.section');
var $sectionName = $section.find('.section-name');
$sectionName.val($location);
});
As I said, when there is only one .section and .wip-location on the page, it works perfectly. I suspect jQuery gets confused when there are multiple .wip-locations or something, but I'm not sure if that's really the problem or how to fix it.
Since it is dynamically added you could try to call the event like this:
$(document).on('change', '.wip-location', function(){/*...*/})
I have a search feature built into a page that hits an API to get a list of items if a user chooses to search instead of manually enter (in an attempt to get some clean data). I have the first column of said table set to call a JavaScript function onclick. That function looks similar to this:
function loadDataFromTable(fname, lname, mname, stn, grade, school) {
$('#StudentFirstName').val(fname);
$('#StudentLastName').val(lname);
if (mname !== "undefined") {
$('#StudentMiddleName').val(mname);
}
else {
$('#StudentMiddleName').val('');
}
$('#StudentNumber').val(stn);
$('#Grade').val(grade);
$('#School').val(school);
return false;
}
The associated HTML elements are all ASP.NET Core Razor View input elements. They look like this:
<div class="form-group">
<label class="col-md-3 control-label">Last Name</label>
<div class="col-md-9">
<input type="text" asp-for="StudentLastName" class="form-control" />
<span asp-validation-for="StudentLastName" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">STN</label>
<div class="col-md-9">
<input type="text" asp-for="StudentNumber" class="form-control" />
<span asp-validation-for="StudentNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Grade</label>
<div class="col-md-9">
<input type="text" asp-for="Grade" class="form-control" />
<span asp-validation-for="Grade" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="School" class="col-md-3 control-label"></label>
<div class="col-md-9">
<select asp-for="School" asp-items="ViewBag.SchoolList" class="form-control"></select>
<span asp-validation-for="School" class="text-danger"></span>
</div>
</div>
Now, if a user clicks on one of the links from the table, all of the values are properly passed into the function, and all of the values for First Name, Last Name, Middle Name, and STN properly update on the view. Grade and School do not update on the View, but their value attribute does update. When I submit the form after the data fills, the correct values are passed to my controller.
What I can't figure out is why the Grade and School values are not populating on the view. The only thing that stands out as different for these two are within the model they are nullable integers, whereas other fields are strings.
I have tried a mixture of .attr('value', grade), .text(grade), and .val(grade), and none of them are working. I can verify that the proper elements are being selected because if I output $('#Grade') I get the input object.
Please refer below link
https://plnkr.co/edit/9HbLMBUw0Q6mj7oyCahP?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.NDCarray = [{val: ''}];
$scope.NDCadd = function() {
$scope.NDCarray.unshift(
{val: ''}
);
};
$scope.data = angular.copy($scope.NDCarray);
$scope.NDCcancel=function(){debugger
$scope.NDCarray=$scope.data;
}
$scope.NDCdelete = function(index) {
if(index != $scope.NDCarray.length -1){
$scope.NDCarray.splice(index, 1);
}
};
});
It contains the textbox with add button. I have added validation for number and required field, it is working fine. but when i click add button it will create another textbox with entered value that time it showing the validation message for all the textboxes , i don't want to show validation message for all the textboxes. need to show validation for corresponding textbox only. that means when i enter something wrong in second textbox it is showing message to that textbox only.refer below screenshot.
validation message displaying for all textboxes.that should display for only one textbox.
Working plnkr : https://plnkr.co/edit/f4kAdZSIsxWECd0i8LDT?p=preview
Your problem is in your HTML, to get independant fields you must :
Move outside the form of the ng-repeat
Provide a dynamic name using $index on your fields, because name is what make each fields independant on the validation.
Here is the final HTML from the plnkr i didn't touch at all the javascript :
<body ng-controller="MainCtrl">
<form name="myForm">
<div ng-repeat ="ndc in NDCarray">
<div class="col-sm-4 type7" style="font-size:14px;">
<div style="margin-bottom:5px;">NDC9</div>
<label>Number:
<input type="number" ng-model="ndc.value"
min="0" max="99" name="{{'input_'+$index}}" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.input.$dirty && myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.number">
Not valid number!</span>
</div>
<tt>value = {{example.value}}</tt><br/>
<tt>myForm['input_{{$index}}'].$valid = {{myForm['input_'+$index].$valid}}</tt><br/>
<tt>myForm['input_{{$index}}'].$error = {{myForm['input_'+$index].$error}}</tt><br/>
</div>
<div class="col-sm-4 type7 " style="font-size:14px;">
<div style="padding-top:20px; display:block">
<span class="red" id="delete" ng-class="{'disabled' : 'true'}" ng-click="NDCdelete($index)">Delete</span>
<span>Cancel </span>
<span id="addRow" style="cursor:pointer" ng-click="NDCadd()">Add </span>
</div>
</div>
</div>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
Couple of changes:
If you add "track by $index" to your ng-repeat it will make each group of elements unique so that you don't have to worry about deriving unique names for elements.
Your validation on the number (myForm.ndcValue.$error.number) didn't work so I changed it to myForm.ndcValue.$error.max || myForm.ndcValue.$error.min
Also, you can throw an ng-form attribute directly on the div with your ng-repeat.
Like this:
<div ng-repeat="ndc in NDCarray track by $index" ng-form="myForm">
<div class="col-sm-4 type7" style="font-size:14px;">
<div style="margin-bottom:5px;">NDC9</div>
<label>Number:
<input type="number" ng-model="ndc.value" min="0" max="99" name="ndcValue" required>
</label>
<div role="alert">
<span class="error" ng-show="myForm.ndcValue.$dirty && myForm.ndcValue.$error.required">
Required!</span>
<span class="error" ng-show="myForm.ndcValue.$error.max || myForm.ndcValue.$error.min">
Not valid number!</span>
</div>
<tt>value = {{example.value}}</tt>
<br/>
<tt>myForm.ndcValue.$valid = {{myForm.ndcValue.$valid}}</tt>
<br/>
<tt>myForm.ndcValue.$error = {{myForm.ndcValue.$error}}</tt>
<br/>
</div>
Here's the working plunker.
I changed the input element name from "input" to "ndcValue" to be less confusing.
I have an array of applications. A subset of that array is pushed into another array.
$scope.applicant.selectedApps = [];
$scope.applicant.applications = applications;
angular.forEach(applications, function (application) {
if(application.isSelected){
$scope.applicant.selectedApps .push(application);
}
}
I know have 2 ng-repeats that loop over those arrays:
<div class="row">
<div class="form-group col-sm-10 col-sm-offset-1">
<div class="radio">
<label>
<input type="radio" name="intent" ng-model="applicant.intent" value="Y" required />YES
</label>
</div>
<div class="row" ng-show="applicant.intent == 'Y'">
<div class="col-xs-11 col-xs-offset-1">
<div class="row" ng-repeat="app in applicant.selectedApps">
<div class="col-sm-11 col-sm-offset-1">
<div class="checkbox">
<label>
<input id="Prog{{app.appid}}" name="Progs" type="checkbox" ng-model="app.isSelected" ng-change="appChange(app)" ng-required="applicant.intent == 'Y'" />
{{app.Objective}} - {{app.Name}} - {{app.Description}}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-10 col-sm-offset-1">
<div class="radio">
<label>
<input type="radio" name="intent" ng-model="applicant.intent" value="N" required />NO
</label>
</div>
<div class="row" ng-show="applicant.intent == 'N'">
<div class="col-xs-11 col-xs-offset-1">
<div class="row" ng-repeat="dApp in applicant.applications">
<div class="col-sm-11 col-sm-offset-1">
<div class="checkbox">
<label>
<input id="dProg{{dApp.appid}}" name="dProgs" type="checkbox" ng-model="dApp.isSelected" ng-change="dProgChange(dApp)" ng-required="applicant.intent == 'N' && appCount <= 0" />
{{dApp.Objective}} - {{dApp.Name}} - {{dApp.Description}}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the two change functions are as followed:
$scope.dProgChange = function (app) {
if (app.isSelected) {
$scope.appCount++;
} else {
$scope.appCount--;
}
};
$scope.ProgChange = function (app) {
if (app.isSelected) {
$scope.selectedAppCount++;
} else {
$scope.selectedAppCount--;
}
};
What i observe is that every app that was initializes with "isSelected" = false will be set to undefined as soon as the radio button is switched to "NO". When switched back to "YES" is selected switches back to false.
This causes the dProgChange to trigger every time the Radio button value changes.
I can't figure out why the "isSelected" switches to undefined.
UPDATE
While trying to create a simplified example, i noticed that the problem occurs as soon as the checkbox is required.
In the plunker listed bellow, the model value for the checkbox is set to undefined as soon as the checkbox is unchecked. That seems to me the same issue i am having.
http://plnkr.co/edit/SBsdew8tzWdNgNOf6W1c?p=info
This is the way AngularJS (ng-model and NgModelController) is supposed to work.
NgModelController has two properties: $viewValue (value entered by user) and $modelValue (value bound to your model). When the value entered by the user fails validation, NgModelController sets the model to undefined.
In AngularJS 1.3, they added the ng-model-options directive. It lets you configure how/when the model gets updated. You can use the allowInvalid option to prevent your model from being set to undefined:
<input type="checkbox"
ng-model="myModel.value"
ng-model-options="{allowInvalid: true}">
So, I am going to add to this answer for future reference. This applies to <input> also. If you have something such as
<input ng-model="speaker.vrange" ng-blur= "updateSpkV()" type="number" data-placement="right" min ="0" max="10"/>
then you will have an invalid input if you set the value to something outside of the range and the model variable will be set to undefined. This became an issue with me when I directly entered an out of bound value rather than using up/down arrows for adjusting a value.