We Keep Coding

Angular 8, User input and updated along with user input and selected check mark

In Angular 8, after user input "$10" and click(Onclick event), the box underneath should be updated with what user input and the entire box should be selected as shown in the picture.
Any tutorials, advice would be appreciated
Image
HTML
<div class="col-md-0.8">
<label class="padding_7">Costs</label>
</div>
<!-- Get user input (Only positive number) and need to be updated -->
<div class="col-md-1">
<input type="positive-number" />
</div>
<div class="col-md-2">
<button data-target="something" data-toggle="sth model" type="round-button custom-button">Update Cost</button>
</div>
Any Idea in Component.ts ???

I hope you are looking for a prototype, can you check the fiddle.
I have created a prototype for the question, please check it
Check fiddle

Try Property Binding, Pass the value in Ts or catch it via form ,Then dynamic the property [checked] in ts.

AngularJS form validation failing when input populated dynamic

I have the following form:
If I click on a star, the input will be automatically populated with the number of the clicked star. (clicking on the 3rd star the input will be populated with number '3' like in the image bellow)
The input bellow the stars is ng-required="true".
<form name="completeSurveyForm" role="form" novalidate ng-submit="vm.save()">
<ul class="question-list">
<li data-ng-repeat="question in vm.survey.questions | orderBy:'conditionalOrderId' track by question.id ">
<small class="label label-primary pull-right">{{question.questionTypeName}}</small>
<h3>
<b>{{$index +1 }}.</b> {{question.questionBody}}
</h3>
<hr> <!-- Replace here with directives -->
<div data-ng-switch="question.questionType">
<numericrange question="question" data-ng-switch-when="NUMERIC_CHOICE" />
</div>
</li>
</ul>
<button type="submit" ng-disabled="completeSurveyForm.$invalid " class="btn btn-primary">
<span data-translate="fqApp.business.form.submit">Submit</span>
</button>
</form>
And the numericrange directive looks like this:
<div class="row">
<div class="col-md-2" ng-if="!completed">
<div>
<span ng-mouseover="showHovered($event)" ng-mouseleave="clearStars($event)" ng-click="selectStar($event)"
data-ng-repeat="sym in range(startNonActive(question), question.maxValue, 1)" class="{{question.symbol}} starred-element" value="{{$index}}">
</span>
<input type="number" name="{{question.id}}"
data-ng-model="question.numericValue"
data-ng-value="numberOfSelectedStars" ng-required="true" />
</div>
</div>
</div>
Getting into the problem:
If I click on a star and the input populates dynamically with a number the form fails to validate like in the image bellow:
I manually write a number in the input the form is valid and I can click the submit button.
But why If I write manually a number in the input, the form gets valid and I can click the 'submit' button and if the input is populated automatically by selecting a star, the form does not validate and I cannot click on the 'submit' button?

While you clicking on star, manually make dirty when value assigned.
angular.forEach($scope.form.$error.required, function(field) {
field.$setDirty();
})
or
You can use $setViewValue(value, trigger) method. This method will be called when a control wants to change the view value.
Refer here

Grouping Radio Button Input elements in loop

I currently have this UI:
the problem is that when I click one radio button, any preselected button will become unselected. So that's telling me that there aren't different input groups - all of the <input> tags are probably in one big group.
This is probably a pretty vanilla problem, but I am simply not an HTML or Angular expert.
Here is the code for this, there is an outer loop and an inner loop using ng-repeat:
<form name="myQuestionsForm" ng-submit="submit()"> // outer form
<div class="panel panel-default" ng-repeat="q in questions | orderBy:[]">
<h1>{{q.prompt.value}}</h1>
<div class="panel-body">
<form id="aform"> // inner form
<div ng-repeat="c in q.children | orderBy:[]">
<div ng-if="c.kind == 'text'">
<label>
{{c.value}}
<textarea name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value"></textarea>
</label>
</div>
<div ng-if="c.kind == 'checkbox'">
<label>
{{c.value}}
<input type="checkbox" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
<div ng-if="c.kind == 'radio'">
<label>
{{c.value}}
<input type="radio" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
</div>
</form>
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="btn btn--success btn">
<h5>Submit</h5>
</button>
</div>
</form>
Perhaps the reason this is happening is because I have nested forms? Maybe I need to get rid of the outer form?

Group radio buttons with the name attribute.
<input> type attribute
The type of control to display. The default type is text, if this attribute is not specified. Possible values are:
radio: A radio button. 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 by default. Radio buttons that have the same value for the name attribute are in the same "radio button group". Only one radio button in a group can be selected at a time.
– MDN HTML Element Reference - <input>
See also:
AngularJS input[radio] Directive API Reference
AngularJS ng-value Directive API Reference
AngularJS ng-checked Directive API Reference

How to stop changing text inside textbox with same ng-model

I have more forms like this:
<form ng-submit="addReply(x)" class="dd animated slideInDown" >
<div class="form-group">
<text-angular ng-model="form.reply"></text-angular>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default pull-right" value="Send" />
</div>
</form>
Have problem with text area because of ng-model="form.reply" when I change some textarea all other text areas are automatically changed... How to prevent it?
Here is example:
http://jsfiddle.net/oLv61qtr/
I just need change one not both...

The answer is: You can't do it.
If you have multiple text fields using the same model variable, they will always display the same value. At the end of the day it is the same variable, so how can it have different values in different places?
Use different model variable on different forms if you need. That seems like the best solution.

validate and capture selected button-group checkbox

i am using bootstrap button-group checkbox with toggle. To easily identify selected option, using the toggle function (courtesy - one of the post here). Working example here.
<div class="form-group">
<label class="sr-only" for="Test">Boxes</label>
<div class="controls" name="Test">
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-default" class-toggle="btn-info">AA</div>
<div class="btn btn-default" class-toggle="btn-info">BB</div>
<div class="btn btn-default" class-toggle="btn-info">CC</div>
</div>
</div>
</div>
stumped with:
1) how to validate that user has to select at least 1 button and
2) how to capture value(s) of selected buttons to be sent to PHP (form).
very novice with web development. Need help. Thanks.

Suppose you have three buttons as shown below:
<input type="button" class="button" value="Button1">
<input type="button" class="button" value="Button2">
<input type="button" class="button" value="Button3">
You can make a hidden field there with an array as given below:
<input type="hidden" class="newField" name="buttonValue[]">
Now, use it in Jquery:
$(document).ready(function(){
$('.button').click(function(){
var values = $(this).val();
$('.hidden').val(values);
});
});
and now when you submit a form then you can easily get value from that field and make a validation accordingly.

there is many ways to do this if you want to submit a form with PHP than its very simple you can add a class and use a hidden fields on the click you can add a class and put a value on hidden field and after the submit you can easily get all the value form hidden fields. you can easily check value of hidden fields, so with this you can validate as well that user select any button or not..