reactive form date pipe in row expand - primeng

I have a primeng grid when select a row it popup the data on it to edit on a reactive form and there is a date column. When I expand a row in first selected two rows I can see the date pipe changes. After that it doesn't .I have used angular state management in the project
<div class="col-md-9">
<input class="form-control" id="dateOfBirth" type="text"
placeholder="Date of Birth" formControlName="dateOfBirth"
[value]="deviceForm.get('dateOfBirth').value | date:'dd-MM-yyyy'"/>
</div>

Related

angularjs ng-repeat input fields ng-required not working

My ng-repeat input fields are dynamic fields, if checkbox checked the ng-repeat input fields are displaying, ADD More button also enabled. If i click the ADD More button same set of input fields are displaying, i need to validate my ng-repeat input fields at the time of checkbox status will be true (checked) using ng-required / required option.
Kindly give me a solution using ng-required = "true" / required.
Thank you.
most probably you need to set the name on each checkbox
something like
<div your ng-repeat>
<input type="checkbox" name="chk{{$index}}" ng-model="yourmodel" ng-required="true" />
</div>

How to have a validation between radio buttons which are dynamically created in angularjs?

I am creating a dynamic radio buttons and checkboxes .But when enter their labels how can we have a validation so that no name is repeated again for next controls respectively
<span style="padding-left: 20px" ng-repeat="r in field.rbtn track by $index | unique:'r.radioname'" >
<input type="radio" id="radio_{{$index}}">{{r.radioname}}
</span>
For this I have used like this..but it does not displaying the values only the label is displayed but under it ,no radio button with its name is not displaying
I am sure you are using ng-repeat for dynamically generating checkboxes.
You can use the Angular unique filter for removing duplicates in your ng-repeat.

Can UI Grid editing be defined per-row?

When using the UI Grid editing features, it's possible to specify cell editing parameters in columnDefs. But this restricts one to have the same type in all rows for a given column.
I have sort of a sideways grid, where each row is a field, and each column is an entity. Is it possible to specify the editing parameters per row, so in a single column, one row can have, say, a dropdown, and another can have a text box?
You can use a custom template, for example this one:
<div><div ng-if="row.entity.colType === 'text'">
<form name="inputForm">
<input
type="INPUT_TYPE"
ui-grid-editor
ng-class="'colt' + col.uid"
ng-model="MODEL_COL_FIELD">
</form>
</div>
<div ng-if="row.entity.colType === 'dropdown'">
<form
name="inputForm">
<select
ng-class="'colt' + col.uid"
ui-grid-edit-dropdown
ng-model="MODEL_COL_FIELD"
ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray">
</select>
</form>
</div>
</div>
is a basic example of an editable cell whose type varies depending on the field colType.
I just copied and pasted the basic templates from ui-grid.edit and put an ng-if around each of them.
I built this plunker, but, as you can see, it doesn't hide the inputs after click so I guess you should create a custom directive similar to uiGridEditor as suggested in this tutorial.

Populate textbox 1 based on value from another (textbox 2) only if the Textbox1 is empty using AngularJS

Hi am a newbie to AngularJS.
I've two textboxes on the page say TextBox1 and TextBox2
The second textbox needs to be populated from TextBox1 when someone enter some values in it (1). But if TextBox 2 having a different value than TextBox1, the value of TB2 should keep there as it is.
That means TB2 value only get populated from TB1 when both the textboxes having same contents.
How can we accomplish using AngularJS.
I've this now
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type='text' ng-model='username' id="textbox1" />
<input type='text' value='{{username}}' id="textbox2" />
</div>
I would suggest using the ng-change argument on input, it accepts an expression that you could use for the logic you describe

Items in ng-options not updating to selected language

My issue is that the options in my dropdown menus are not changing to the correct language.
For example if I go from English to Chinese everything else will update just fine, but the items in the drop down won't until after I select one of the options in the list, then it will change to the appropriate language. However, all of the other dropdown menus will remain untranslated until they are interacted with like the first one. Is there some way for me to force them to update after I change what language it's being displayed in?
Here's an example of one of the dropdown menus
<label class="col-md-3 col-xs-6">
<span translate="chart"></span>
<select class="form-control" ng-model="report.chart" ng-options="c | translate for c in charts" ng-change="setChartType(report)">
</select>
</label>

Resources