Develop Reference

Angular pipe with reactive formControlName of angular form array

Here i am using custom pipe to format the rate field.
Which is read only field.
Issue is value attribute not formating the rate field on page load.
Which is working for another fields
<div formArrayName="rateList" *ngFor="let product of formData.controls; let i=index;">
<div [formGroupName]="i">
<input formControlName="rate" readonly="readonly"
[value]="formData.controls[i].get('rate').value | udpCurrency : false : this.translate.currentLang" />
</div>
</div>

I don't know the exact answer for this, but as a workaround you can use setTimeout at the time you are setting the value to the form array.
setTimeout(()=> {
this.rateList.setValue(someRateArray)
} ,0)

mat input with mat-datepicker-toggle problem

I have a form where every required field turns red if the user clicks and blur the field without writing anything on the field, the problem comes with this date picker
<mat-form-field class="contenedorFecha" appearance="outline" color="accent">
<mat-label>Fecha plantación</mat-label>
<input matInput [matDatepicker]="fechaPlantacion" formControlName="fechaPlantacion" readonly (click)="fechaPlantacion.open()">
<div matSuffix style="display:flex; align-items: center">
<mat-datepicker-toggle [for]="fechaPlantacion"></mat-datepicker-toggle>
<button mat-icon-button (click)="deleteDate('fechaPlantacion', $event)" [disableRipple]="true"
*ngIf="fincaForm.get('fechaPlantacion').value !== null">
<mat-icon class="nav-link-icon mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true">close</mat-icon>
</button>
</div>
<mat-datepicker #fechaPlantacion></mat-datepicker>
</mat-form-field>
When I click on the input it opens the matDatePicker, but as it opens the date picker the input blurs, so the input changes to red, any way to prevent this? I've tried with css but the problem is I want the input to be red but only when it should

Yes the problem is because the focus gets out of the input control and goes to the calendar. If you are only using the default button as the trigger to open the date picker, then you won't encounter this issue. But like what you did, sometimes it's better to add that (focus) or (click) trigger. I can only think of one work around.
Start by removing the initial validators from your field. Then put a handler whenever the material date picker was closed such as:
<mat-datepicker #fechaPlantacion (closed)="close()"></mat-datepicker>
and in the close method, you have to set the validators dynamically:
close() {
this.fechaPlantacion.setValidators(Validators.required);
this.fechaPlantacion.updateValueAndValidity(null);
}
This way, the validation will only be added after the selection (or not selecting anything) from the dates in the calendar. I also tried using readonly input and still working fine after testing in my local machine.

how to create search bar dropdown in angular 4?

I have created below search bar component which interacts with API every time a key is pressed.
<div class="fill-remaining-space">
<md-input-container class="example-full-width" color="accent">
<md-icon mdPrefix>search</md-icon>
<input type="text" mdInput #input (keyup)="search(input)">
<md-icon mdSuffix *ngIf="input.value.length > 0" (click)="input.value=''">clear</md-icon>
</md-input-container>
</div>
Now I am getting results array in my component.ts file. I want to show a dropdown below this search bar when results are fetched from db.
I tried doing multiple things like applying *ngIf on list. but all in vain.
Is there any simple solution which can allow me to show a dropdown list after I start typings characters in search box input?
Thanks in advance.

How can I preserve initial value using ngModel in angularJS

I'm trying to add a feature for in line editing.
Here's my html:
<div class="value" data-ng-repeat='value in aaVM.archValues'>
<div class="nameContainer">
<div class='name' data-ng-hide='editing' data-ng-click='editing = !editing'>
<span>{{value.name}}</span>
<div class="icon">
<md-icon class="mdIcon" md-svg-src="./resources/images/icons/edit.svg"></md-icon>
</div>
</div>
<form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'>
<input type="text" data-ng-model='value.name'>
<div class="cancel" data-ng-click='editing = !editing'>X</div>
<input type="submit">
</form>
</div>
</div>
Everything works. Here's the issue, because I'm using ng-model to bind the values name in the form, When I hit cancel, the ui will present the edited version of the input(assuming edits were made) despite hitting the cancel button.
I want the user to be able to edit freely, and upon hitting the cancel button, it revert the value back to the original value of value.name.
I could use a different variable, but I want the initial value of the input to be the value from the ng-repeat. Is there a way to temporarily clone the value and retrieve it later in the scope of an ng-repeat. Or any other work around to enable to cancel button in the way I've described? Thanks.

In Angular, Use directive ngModelOptions to change ng-model value on submit event and use $rollbackViewValue to roll back input original value
Try this:
<form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'>
<input type="text" ng-model-options="{ updateOn: 'submit' }" data-ng-model='value.name'>
<div class="cancel" data-ng-click="editing = !editing; value.name.$rollbackViewValue();">X</div>
<input type="submit">
</form>
Official Documentation for more information

Angularjs ng-model value not updating in view when modified by another function

I'm creating a payroll app using AngularJS which contains a page where the user is able to edit start time and end time fields for a job as well as being able to change the end time by modifying another two fields (hours and minutes) which refer to the length of time worked on the job.
So far, I've been able to make the hours and minutes fields automatically update correctly when the user changes the start time or end time fields with the use of ng-change. I'm now trying to do things the other way around so that the end time is automatically updated based on the hours and minutes fields and although the variable which stores the end time is correctly updated, the input field displaying the end time doesn't change.
Here's the HTML for the four fields:
<label class="item item-input">
<span class="input-label">Start Time</span>
<input type="time" class="item-input input-label editable" ng-model="data.startTimeObject" ng-change="updateHoursAndMinutes('start')"/>
</label>
<label class="item item-input">
<span class="input-label">End Time {{data.endTimeObject.getHours()}}</span>
<input type="time" class="item-input input-label editable" ng-model="data.endTimeObject" ng-change="updateHoursAndMinutes('end')" />
</label>
<label class="item item-input">
<span class="input-label">Hours</span>
<input type="number" class="item-input input-label editable" min="0" max="24" ng-model="editedRecord.hours" ng-change="updateEndTime()" />
</label>
<label class="item item-input">
<span class="input-label">Minutes</span>
<input type="number" class="item-input input-label editable" min="0" max="59" ng-model="editedRecord.minutes" ng-change="updateEndTime()" />
</label>
And the relevant code from the updateEndTime() function:
$scope.updateEndTime = function(){
.
.
.
.
$scope.data.endTimeObject.setHours(savedEndTimeHours + actualHourDifference);
$scope.data.endTimeObject.setMinutes(savedEndTimeMinutes + actualMinuteDifference);
}
{{data.endTimeObject.getHours()}} next to the "End Time" label displays the hours correctly when updated from the updateEndTime() function but the field where the user can manually edit the end time doesn't automatically show the updated end time value.

Don't know if you are still having this problem, but maybe somebody else stumbles across this. Updating the date object using setSeconds worked for the object itself (I could output it in a toast), but input field wouldn't display the new value.
In the end, what I had to do was to set a brand new date object, not just using functions. In your case, maybe you could do something like
$scope.updateEndTime = function() {
// previous statements
var newTime = new Date(1970, 0, 1, 0, 0, 0, 0);
newTime.setHours(savedEndTimeHours + actualHourDifference);
newTime.setMinutes(savedEndTimeMinutes + actualMinuteDifference);
$scope.data.endTimeObject = newTime;
}
If needed, you can probably reuse values from the old date object in the new one.
Why this works I don't quite know (very new to AngularJS myself), but I would guess that the change is not recognized unless the entire object is replaced.