Develop Reference

Unable to Check Radio-button on (click) of another Radio Button: Angular Reactive Form

i wan to change the radio button checked status when user clicks on a radio button in another group.
i am trying to do it on click event, when user clicks on one Radio-button.
i am checking for the value and changing the radio-button value in another group.
i have added stackblitz problem-statement link for the same. please let me know what am i doing wrong here.
But i am unable to achieve this
please help.

// Getter for form value
this.form.controls.frequency.value = 'freq6'; // Wrong, not working
const value = this.form.controls.frequency.value; // Correct, only for read value
This syntax is only for get values, not for set.
To set values please use setter .setValue()
In your case: this.form.controls.frequency.setValue('freq6');
You can read more about it in documentation. https://angular.io/guide/reactive-forms#replacing-a-form-control-value

In order to change the value in the controller you have to use controller.setValue().
this.form.controls.frequency.setValue('freq6');
Your changeFrequency function should be like
changeFrequency(event){
if(event.target.value === "dash2"){
this.form.controls.frequency.setValue('freq6');
}
}
Demo

ng-disabled overrides custom directive behavior

I'm developing the AngularJS client. I've got a custom directive used as an attribute. The directive checks the access level of the element and sets it to be disabled if the current user is not allowed to use it.
The problem begins when the same element has ng-disabled attribute. In this case the ng-disabled sets the ability of the element, never mind of what I set in my custom directive.
For example I have a button that should be disabled in case the form is invalid. At the same time I'd like to use my custom directive in order to set the button to be disabled if the user doesn't have a permition to use it.
<button ng-disabled="myFrm.myCtrl.$invalid" my-custom-directive="controlName"/>
Inside myCustomDirective I check if the named control is allowed to be activated by the user. If not - I set the disabled attribute to the element. But in case myFrm.myCtrl.$invalid is false ng-disabled removes the disabled attribute and the button is enabled.
Is there any solution to this problem? How can I prevent from ng-disabled to perform its operation?

Does your example directive reflect how you applied your actual directive to the button element? I noticed that your example directive is not following the correct naming convention of making each upper case letter in the directive name a lower case letter with a leading hyphen. i.e. myCustomDirective should be applied to the button like so:
<button ng-disabled="myFrm.myCtrl.$invalid" my-custom-directive="controlName"/>
Otherwise your directive will not be complied or linked for that button.
The only other thing I could think of without seeing the actual code is the priority of the directive. According to the angular docs for the ngDisabled directive:
This directive executes at priority level 100.
By default custom directives have a priority of 0. As long as you have not changed this directive parameter your directive should be compiled after ng-disabled and linked after ng-disabled and therefore have the final say on whether or not the button is disabled or enabled.
-- EDIT --
You should add a watch to myFrm.myCtrl.$invalid as was suggested by another and reapply your directives rules whenever the value changes. You don't need to pass the whole controller into your directive though, you could simply use two way binding on myFrm.myCtrl.$invalid. I am not sure how $watch priority works yet. I am hoping that because your directive will be compiled first it will apply its watch on myFrm.myCtrl.$invalid after ngDisabled does and hopefully that means it will handle value changes of myFrm.myCtrl.$invalid after ngDisable does so that your directive has the final say on what rule is applied.

Finaly I've found a solution to my problem. Instead of watching ng-disabled variable I've totaly diconnected the ng-disabled from its variable. In order to do it I've set the ng-disabled to be allways true in my own directive. My directive is an attribute, so after I've tried some different ways to do it, the solution was to add in my directive constructor the following code:
this.isDisabled = "true";
this.attrs["ngDisabl​ed"] = this.isDisabled;
It's very very important to set the this.isDisabled to "true" as a string and not boolean. Otherwise it doesn't work.

Checkbox value: optional or required?

According to MDN the value attribute is optional except when the value of the type attribute is radio or checkbox. But it doesn't seem to be correct. Is there anything wrong with the following:
<input type="checkbox" id="input">
<script>
document.getElementById('input').onchange = function () {
alert('Checked!');
};
</script>
DEMO

The value attribute is only required if you want the checkbox to post through a value when you submit a form. If you're not submitting a form but just want to know when it's clicked, then there's nothing wrong with your example.
Note that your example will also alert "Checked!" when the user un-checks the box too. That's why you might also want to look at the value of the checked attribute in your Javascript.

I think document says that it is mandatory to have the value when you need the selected option when posted back and to know what value is selected, i am not sure how why do you think your code should not work . In current case if you submit the form and you have to checkbox you will not come know what value is being selected.
checkbox: A check box. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected. You can also use the indeterminate attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).

For checkbox you may check for the 'checked' propoerty is true or false since checkbox is always used either as a flag / Boolean expression .
document.getElementById('input').onchange = function () {
alert('Checked!');
alert(document.getElementById('input').checked);
};

How to send data from input without a ng-click

I have an input field with a number in it. I want to make it possible to edit the field and update it. So it is like an input field with the number 5 and when i change it to 6 it has to automatically update it self. So if i refresh the page the number should have been updated to the number 6. I've tried it with ng-change but it didnt work.. The code that i used was:
<input type="text" ng-change='change(di)' value="{{di.hours}}">
To test the ng-change i used the following code in my Controller
$scope.change = function(data){
alert(data);
};
The problem was, it didn't alert anything when i had changed my input.

Try using ng-model to bind input to some property of scope.
To detect changes of scope you can use $watch function.

Try using ng-model="{{di.hours}}" instead to bind input, you will get value automatically.
And do not use ng-change
you can do $watch in angular controller like
scope.$watch('di.hours', function(newVal, oldVal) {
alert(newVal);
});

Angular ng-change vs ng-model performance

Is there any performance improvement in using ng-change in an input instead of ng-model?
I pressume that when ng-model is used in an input, then a "$watch" (or similar) is made by angular in a variable, and that adds work load.
But if ng-change is used, then the variable (model) can be updated when needed, code can be executed only when this variable is changed by the input.
This works assuming that only one input can change a variable.
Example follows:
using ng-model
<input type="text" ng-model="ElTexto">
<div ng-show="ElTexto"></div>
using ng-change
html
<input type="text" ng-change="elTexto()">
<div ng-show="ElTexto"></div>
js
$scope.elTexto(){
$scope.ElTexto = true;
}

ng-change requires ng-model, so you can't choose between the two. You must use ng-model, and can also use ng-change if you wish.
Be aware that the two are VERY different. ng-model will keep your input's value and its backing model in perfect sync; ng-change will indicate that the user is interacting with the input. If you care about the value they're changing, like if you're doing autocomplete, just use ng-model and have all your code share the same variable. If you specifically want to take an action when the input changes, regardless of what the value is, then you can use ng-change for that.

ng-change will have batter performance then ng-model. As in every digest cycle ng-model will be evaluated while ng-change will be evaluated on change of input.