Develop Reference

Best way to reload component in Angular 6

In my application I have a list of different "questions" each question refers to one of two components controlled by a variable QuestionIndex that basically takes the current object in the list.
So I have Component A, which has a form inside of it with two Radio buttons:
<form [formGroup]="form">
<label>
<span class="inlineBlock">
<input type="radio" value="Ja" formControlName="response" class="radioInput">
<span class="labelSpan">Ja</span>
</span>
</label>
<label>
<span class="inlineBlock">
<input type="radio" value="Nej" formControlName="response" class="radioInput">
<span class="labelSpan">Nej</span>
</span>
</label>
</form>
I fill out the form and increase the QuestionIndex.
Then the form inside of that component is not reloaded but already filled out.
How can I ensure that the component is completely reloaded?
I have tried with ngOnChanges but this won't really work because there are so many values I need to reset and each reset fires the ngOnChanges again.
How it's used
Below is how the component is used when the index is increased the currentQuestion object is changed and therefore the component is loaded
<app-radio-question [text]="currentQuestion.text"
*ngIf="currentQuestion.type == 'RadioQuestion' && !showEndQuestion"
[title]="currentQuestion.title" [NoOptionText]="currentQuestion.noOption"
[YesOptionText]="currentQuestion.yesOption"
[cacheData]="cacheData"
(formChangedEvent)="OnQuestionResponse($event)"></app-radio-question>
However this component is changed but not updated this means that if I change a value inside of it I get the ExpressionChangedAfterItHasBeenCheckedError error.

This input is not bound to any variable at all.
You should consider doing that and just reset that specific variable
HTML
<input [(ngModel)]="inputVariableName" (change)="onChangeFunc()" value="true" formControlName="response" class="radioInput"/>
TS
inputVariableName = false; // initial
onChangeFunc() {
inputVariableName = false; //set it to initial again
}
But you have to import FormsModule for this to work.

I would suggest that you used some kind of framework for radio buttons. I use Angular Material and the radio buttons is grouped like this:
<mat-radio-group aria-label="Select an option">
<mat-radio-button value="1">Option 1</mat-radio-button>
<mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>
A full example can be find here Radio Button Angular Material.

How to get ng-model value of Radio button using Jasmine and Karma in AngularJS 1.x

I am new to Jasmine and Karma
I am testing an AngularJS application using Jasmine+Karma
My Html looks like this:
<div id="form">
<div id="car-type">
<input type="radio" ng-model="$ctrl.carType" ng-change="$ctrl.onTypeChange()" name="carType"
ng-value="true"/>
<span class="label">Honda</span>
<input type="radio" ng-model="$ctrl.carType" ng-change="$ctrl.onTypeChange()" name="carType"
ng-value="false"/>
<span class="label">Mazda</span>
</div>
</div>
However, when I try getting the value of the model bound to the input radio button, true is returned (because of ng-value I believe):
var wrapperForm = element[0].querySelector('#form');
// Returns true
console.log(wrapperForm.querySelector('#car-type input').value);
But, I want the model value bound to the radio button.
I don't know how to retrieve the model value bound to the radio button ($ctrl.carType).
Is there a way to retrieve it using the querySelector?
Can someone please help me out?

Yes:
document.querySelector("#car-type [type=radio]").getAttribute("ng-model")
However, you have two instances, you might want querySelectorAll instead.

To disable all radio buttons if anyone of them is clicked in angularjs ng-repeat

what i am trying to do here is, i have an ng-repeat in a form and if i click anyone of those input buttons corresponding all buttons get disabled
<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
<hr>
<p>Q. {{question.questionText}}</p>
<form >
<div ng-repeat=" option in question.questionOptions track by $index">
<label>
<input name="options" type="radio" value="$index" ng-click="sinSurCtrl.questionId=question.questionId; sinSurCtrl.answer=$index+1; sinSurCtrl.createAnswer()" onclick="this.disabled = true">
<span> {{option}} {{$index+1}} {{question.questionId}} </span>
</label>
</div>
</form>
</div>
here is the view-
as you can see if i select anyone of those option it is getting disabled but what i am trying to do is if i attempt anyone option then options corresponding to the same question get disabled.
for example-
in Q3. which is a better orator ?
if i choose option (a) then it get selected and after that automatically bot options (a) and (b) get disabled.
Note- please try to keep solution completely in angularjs or if you want use affordable amount of javascript other then that please avoid using external libraries like jQuery(i know nobody in his senses will handle trouble of using jQuery and angular together but for the sake of example i have included its name)

Proposed solution with some suggested refactoring...
First change the ng-click directive to point to a new onOptionButtonClicked function on sinSurCtrl which takes in the two parameters question and index (which it needs to carry out it's work):
<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
<hr>
<p>Q. {{question.questionText}}</p>
<form>
<div ng-repeat="option in question.questionOptions track by $index">
<label>
<input
name="options"
type="radio"
value="$index"
ng-click="onOptionButtonClicked(question, $index)"
ng-disabled="question.disabled">
<span> {{option}} {{$index+1}} {{question.questionId}} </span>
</label>
</div>
</form>
</div>
Also take note of the newly added ng-disabled="question.disabled" directive. This is part of the mechanism that will enable/disable the question's controls.
Now move the variable assignments to the new onOptionButtonClicked function. The controller is generally a better place (than the view) for variable assignments, especially if there are several of them on the same directive.
sinSurCtrl.onOptionButtonClicked = onOptionButtonClicked;
function onOptionButtonClicked(question, index){
sinSurCtrl.questionId=question.questionId;
sinSurCtrl.answer=index;
sinSurCtrl.createAnswer();
question.disabled = true; // <--- This is what disables the option buttons
}
This is where an answered question object gets it's disabled property set to true. This in combination with the ng-disabled directive mentioned previously is what disables the option buttons.

On your controller, create a function that checks if a given questionId has been answered and return truthy if it has. Call that function in ng-disabled in the input tag:
<input type="radio" ng-disabled="sinSurCtrl.questionHasAnswer(question.questionId)" ... />

Have to click radio button twice for html element to change using AngularJS

I have a very simple form where I have Yes and No radio buttons. Each radio button is bound to the same item in the scope (I am using AngularJS). The Yes button's value gets set to true on being selected and the No button's value gets set to false when being selected.
When I click the Yes button once, both the model and the html element changes correctly. But when I click the No radio button, the model changes correctly but the html element does not become selected. If I click the No radio button again the html element then changes to it's correct selected state.
The example below is just part of a larger html page and controller but I have kept the Angular model structure the same because this may be where the issue is.
HTML:
<div ng-app="myApp">
<div ng-conroller="MyController">
<div>
<label>
<input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="item.isBeingPaid" value="true"/>
Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="!item.isBeingPaid" value="false"/>
No
</label>
<p>{{item.isBeingPaid}}</p>
</div>
</div>
</div>
Controller:
var app = angular.module('myApp', [
'my.controllers'
]);
var controllers = angular.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.item = {};
});
I have created this fiddle to demonstrate the issue.
http://jsfiddle.net/prajna78/Tdq9n/14/
What am I missing? It seems like such a simple thing.

There are a few problems with your code.
First, use ng-value instead of value in your radio button elements. This makes sure that the value you're binding to is a boolean (true) and not a string ("true"). Also, you don't need ng-checked (ng-model is sufficient).
<input type="radio" name="IsBeingPaidMinimumWage" ng-model="isBeingPaidMinimumWage" ng-value="true"/>
Also, you're binding to item.isBeingPaidMinimumWage, but your $scope variable is just isBeingPaidMinimumWage, so the initial value that you assign in your controller isn't reflected in the view.
Demo

How to refetch a scope value in view using angularjs

First of all sorry if my title doesn't quite explain my problem. I have a form which is create a set of question dynamically. In the code below I use ng-repeat="opt in q.options" and I have a button which add a new option.
My view code
<div>
<label for="">Options: </label>
<a ng-click="addOption($event, $index)">
<i class="icon-plus-sign icon-large"></i> Add option
</a><br /><br />
<div ng-repeat="opt in q.options">
<label><span>{{opt.id}}.</span></label>
<input type="text" ng-model="opt.text" placeholder="Add new possible answer here.">
<a ng-click="q.options.splice($index,1)"><i class="icon-remove-sign icon-large"></i></a>
</div>
</div>
<div>
<label for="required_credit">Answer: </label>
<select id="city" ng-options="c for c in options">
</select>
<!-- <ul>
<li ng-repeat="opt in q.options">{{opt.id}}</li>
</ul> -->
What I want is to reuse q.options in my select tags but it the problem is it doesn't populate. I've used ul li tags then ng-repeat="q.options" and it worked but I want to use it using the select tags.
PS: The reason why I want to use the same model is to simply get the appended data which I inserted dynamically.
For instance:
I have 2 input buttons and I add a new input button
Since I'm using the same model my select option would then be updated then it would have 3 options as well.

Accordingly the ngSelect documentation, ng-model is a required parameter for ngSelect. I believe, you want to store your selected value somewhere ;)