We Keep Coding

ngIf an angular reactive form component value

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.

dynamic form field with checkbox in angularjs

I want to submit values of the input field to controller with ng-submit but it shows undefined when i console input model.Each input values are saved with check box. But i want to check if any checkbox is unchecked or not.
Here is form html:
<form id="valueForm" ng-submit="submitValues()">
<div class="small-input list padding" style="padding-top:4px;">
<div ng-repeat="item in inputs track by $index">
<label class="item item-input">
<input type="text" placeholder="" ng-model="value" ng-disabled="ticked">
<ion-checkbox ng-click="addField($index)" ng-change="saveValue(ticked,value,$index)" ng-model="ticked"
ng-disabled="!value" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
</label>
</div>
</div>
<button type="submit" ng-show="showButton" class="button button-dark button-shadow pull-right" style="" ><i class="ion-ios-arrow-forward"></i></button>
</form>
Here is controller:
$scope.showButton = false;
$scope.inputs = [{value:''}];
var checkedValues =[];
$scope.addField = function (index) {
if($scope.inputs.length <= index+1 && $scope.inputs.length<10){
$scope.inputs.splice(index+1,0,name);
}
}
$scope.saveValue = function (ticked,item,index) {
if(ticked){
console.log('index'+index);
if(index>0) $scope.showButton =true;
checkedValues.splice(index,0,item);
console.log(checkedValues);
}else{
checkedValues.splice(index,1);
console.log(checkedValues);
}
}
$scope.submitValues = function(){
console.log($scope.value);
}

Because the inputs and checkboxes are inside an ng-repeat directive, the ng-model values need to be a property of the item iterator.
<form id="valueForm" ng-submit="submitValues()">
<div ng-repeat="item in inputs track by $index">
<!-- REMOVE
<input type="text" ng-model="value" ng-disabled="ticked">
<ion-checkbox ng-model="ticked"> </ion-checkbox>
-->
<!-- INSTEAD -->
<input type="text" ng-model="item.value"
ng-disabled="item.ticked">
<ion-checkbox ng-model="item.ticked"> </ion-checkbox>
</div>
<button type="submit" ng-show="showButton">
<i class="ion-ios-arrow-forward"></i>
</button>
</form>
The ng-repeat directive creates a child scope for each item. Using a value without a "dot" will put the value on each child scope. Hence the rule: "always use a 'dot' in your ng-models".
For more information, see AngularJS Wiki -- The Nuances of Prototypical Inheritance
UPDATE
To see the inputs on submit:
$scope.submitValues = function(){
//console.log($scope.value);
console.log($scope.inputs);
}

is there any way to bind ng-model to multiple input fields uniquely inside a directive?

In my Project i Got a Issue like.I need to bind the user hobbies in the text field.if the user comes with a single hobby he can directly enter the hobby that he has. but when he had multiple then he had to click add multiple hobbies button.that working fine when i am displaying input fields dynamically using directives.but the issue is the value that coming from ng-model for that input field is binding to all input fields.
Here is my code.
Thanks in advance!
these are the images
this is how i am getting
this is what i need
In HTML
<div>
<div id="showHobbyfield"></div>
<input type="number" class="form-control" placeholder="ADD HOBBIES"
ng-click="addHoby()">
</div>
In controller
$scope.addHoby= function(){
var compiledeHTML = $compile("<div my-hobby></div>")($scope);
$("#showHobbyfield").append(compiledeHTML);
};
$scope.addUser = function(){
$scope.Users= [];
var obj = {
userhobby : $scope.user.morehobies
};
$scope.Users.push(obj);
menuStorage.put($scope.Users);
//menustorage is service to store user in localStorage.
In directive
'use strict';
angular.module('myApp')
.directive('myHobby', function() {
return {
scope : false,
templateUrl: 'views/my-hobby.html'
};
});
this is template: my-hobby.html
<div class="input-group">
<input type="text" ng-model="user.morehobies" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>

For this i would suggest some other way if its ok with you.
If your hobbies is coming in array, like
user.morehobies = ['Reading', 'Writing']
or create array for storing hobbies.
then inside directive you can pass that object in directive.
I will use ng-repeat inside directive.
<div class="input-group" ng-repeat="h in hobies">
<input type="text" ng-model="h" class="form-control" placeceholder="type your hobbies here">
<div class="close-icon">
<span class="glyphicon glyphicon-remove" style="padding-left: 6px;"> </span>
</div>
</div>
so whenever user clicks on "Add hobbies" then we can add empty string in hobbies object in directive.
and whenever user clicks on remove you can remove that item from array.

angular Error: safe is undefined

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);
}
});
}
};
});

AngularJS: ng-model not clearing input

I have a dynamic input for CPFs (Brazilian 'social security' number).
Every time I enter one CPF, another input should be displayed, and so on..
But for some reason, the ng-model is not being cleared after the CPF is added.
Here's my HTML (inside a directive with isolate scope):
<div ng-repeat="cpf in cpfs" class="field-input">
<input type="text" class="field" ng-model="cpf.number" required>
<label>added CPF</label>
</div>
<div class="field-input">
<input type="text" class="field" ng-model="cpf.number" required>
<label>add new CPF</label>
<button ng-click="addCpf(cpf)" class="btn btn-primary">add</button>
</div>
Here's my controller (inside a directive with isolate scope):
$scope.cpfs = [];
$scope.addCpf = function(cpf) {
$scope.cpfs.push(angular.copy(cpf));
delete $scope.cpf;
};

instead of delete $scope.cpf; use $scope.cpf.number = "";
we can't delete an model, we have to set it to blank, because its linked with our View part