Develop Reference

How to access the properties of a formArray in HTML?

I'm trying to implement a reactive Angular form, but, I can't access the properties of the array on HTML, I never worked with reactive form, if anyone could guide me I would be grateful! I'm using Angular 10 and I have the following code:
TS
operationModel: IScriptOperationsModel;
formOperation: FormGroup;
constructor(
private fb: FormBuilder,
...
) {}
ngOnInit() {
this.operationModel = new IScriptOperationsModel();
this.operationModel.scriptOperationOrders = [];
this.buildForm(new IScriptOperationsModel());
this.scriptOperationsService.findScriptOperation(this.operationId).subscribe((operation) => {
this.operationModel = operation.data as IScriptOperationsModel; // api return
this.buildForm(this.operationModel); // I pass the return of the api to the form
});
}
buildForm(operation: IScriptOperationsModel) {
this.formOperation = this.fb.group({
descriptionCode: [operation.descriptionCode],
description: [operation.description],
workStations: this.fb.array([])
});
this.formOperation.setControl('workStations', this.fb.array(this.operationModel.scriptOperationOrders));
}
get workStations(): FormArray {
return this.formOperation.get('workStations') as FormArray;
}
HTML
<div
class="card"
[ngClass]="{'bg-principal': idx === 0, 'bg-alternative': idx !== 0}"
formArrayName="workStations"
*ngFor="let workstation of workStations.controls; index as idx"
>
<div class="card-body" [formGroupName]="idx">
<div class="form-row">
<div class="form-group col-md-1">
<label>Id Oper.</label>
<input
type="text"
name="idOperation"
class="form-control"
disabled
formControlName="rank" <!-- whatever with or without binding gives error -->
/>
</div>
<div class="form-group col-md-2">
<label>Time</label>
<input
type="time" class="form-control" name="defaultTime"
[formControlName]="defaultTime" <!-- whatever with or without binding gives error -->
/>
</div>
</div>
</div>
</div>
Models
export class IScriptOperationsModel extends Serializable {
public description: string;
public descriptionCode: string;
public scriptOperationOrders: IScriptOperationOrdersModel[]; // array which I need
}
export class IScriptOperationOrdersModel extends Serializable {
public rank: number;
public defaultTime: string;
public asset?: IAssetModel;
public provider?: IProviderModel;
}
error-handler.service.ts:87 Error: Cannot find control with path: 'workStations -> 0 -> rank' # undefined:undefined
NOTE: I already looked at some answers here on the site such as this, this and this , but none of them solved this problem!

your problem is here :
this.formOperation.setControl(
'workStations',
this.fb.array(this.operationModel.scriptOperationOrders) <== here the problem
);
you are passing an array of IScriptOperationOrdersModel instead of array of form group.
To make your code working, you have to loop on every element of this.operationModel.scriptOperationOrders array , and instanciate a new FormControl object then push it in the workStations form array.
To access its elements, you can use controls[indexOfGroup].rate
You can take a look at this simple example you will understand everything.

How to bind to an Angular form from users selected option

OK it's a bit more complicated than the headline..
This form I am working on is a form group. It has a few fields ( supplement name, description and tags) the supplement name one is what I need help with as I have not worked on a complicated form like this and want to get it right and not just offer a messy patch job.
Here is the expected logical order of what happens
user adds a new supplement by clicking on the field and begins typing "creatine" for example
there is a query sent out that fetches products based on the entry into the input and
returns a JSON that are offered as suggestions
user clicks the suggestion "creatine"
field is populated and binds
we add another entry through the "add option" and repeat for X amount of products we want to
add.
What actually happens
user adds new supplement by clicking the field and types "creatine" suggestion request is
sent off and populates the dropdown
user clicks on the suggestion "creatine" the field takes that value
value is actually blank
user adds another supplement but the previous selection is in the field
user clears it and types again
value is blank
What needs to happen is the user can add X amount of supplements and able to grab whatever option from the dropdown recommendation and it is added to the form group array and does not interfere with the other form group array values.
I know this is not the right way to bind the form and I don't think it's right the way i'm binding the mat input field to trigger the query and this is the reason why I'm asking the question again, to not offer a patch job.
Component code
import { Subscription } from 'rxjs/Subscription';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '#angular/forms';
import { UtilitiesService } from '../../utilities/utilities.service';
import { GetSupplementsService } from './get-supplements.service';
#Component({
selector: 'app-supplements',
templateUrl: './supplements.component.html',
styleUrls: ['./supplements.component.css'],
providers: [GetSupplementsService],
})
export class SupplementsComponent implements OnInit {
supplementForm: FormGroup;
queryField: FormControl = new FormControl();
private supplementInventoryResults: Array<ISupplementInventoryResponse>;
private eventForm: FormGroup;
private searchResults: any;
private searchSubscription: Subscription;
private addSupplementSubscription: Subscription;
subcription: Subscription;
constructor (
private bottomSheet: MatBottomSheet,
private _fb: FormBuilder,
private ref: ChangeDetectorRef,
private _utils: UtilitiesService,
private getSupplements: GetSupplementsService,
private router: Router
) { }
public ngOnInit(): void {
this.browsingStackHistory = false;
this.loading = true;
this.supplementForm = this._fb.group({ // the form in question
entryArray: this._fb.array([
this.getUnit()
])
});
this.searchSubscription =
this.queryField.valueChanges
.debounceTime(600)
.distinctUntilChanged()
.switchMap((query) => this.getSupplements.search_supplement_by_category(query))
.subscribe((result) => {
this.searchResults = result;
});
}
public ngOnDestroy(): void {
this.subcription.unsubscribe();
}
private getUnit(): FormGroup {
return this._fb.group({
supplementName: [''],
description: [''],
tags: ['']
});
}
private addUnit(): void {
const control = <FormArray>this.supplementForm.controls['entryArray'];
control.push(this.getUnit());
}
private removeUnit(i: number): void {
const control = <FormArray>this.supplementForm.controls['entryArray'];
control.removeAt(i);
}
private addSupplement(): void { // this will do the post to the service
const supplementObject = {
start: this._utils.get_upload_time(),
data: this.supplementForm.value,
rating: 0
};
}
}
Template
[![<mat-tab label="Add Stack (Test)">
<div style="padding:8px;">
<div fxLayout="row wrap">
<div fxFlex.gt-sm="50%" fxFlex="100">
<h1>Add New Supplements Stack</h1>
<form \[formGroup\]="supplementForm" class="log-workout">
<!-- Start form units array with first row must and dynamically add more -->
<div fxLayout="column" fxLayoutAlign="center center" class="row-height">
<div formArrayName="entryArray">
<mat-divider></mat-divider>
<!-- loop throught units -->
<div *ngFor="let reps of supplementForm.controls.entryArray.controls; let i=index">
<!-- row divider show for every nex row exclude if first row -->
<mat-divider *ngIf="supplementForm.controls.entryArray.controls.length > 1 && i > 0"></mat-divider>
<br>
<!-- group name in this case row index -->
<div \[formGroupName\]="i">
<!-- unit name input field -->
<div class="row">
<mat-form-field class="example-form">
<input matInput placeholder="Supplement Name" \[formControl\]="addSupplementField"
formControlName="supplementName" \[matAutocomplete\]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let product of supplementResults" \[value\]="product?.product_name">
<img class="example-option-img" aria-hidden \[src\]="product?.product_image" height="25">
{{product?.product_name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="example-form">
<input matInput placeholder="Description" formControlName="description" required>
</mat-form-field>
<mat-form-field class="example-form">
<input matInput placeholder="Tags" formControlName="tags" required>
</mat-form-field>
</div>
<!-- row delete button, hidden if there is just one row -->
<button mat-mini-fab color="warn" *ngIf="supplementForm.controls.entryArray.controls.length > 1"
(click)="removeUnit(i)">
<mat-icon>delete forever</mat-icon>
</button>
</div>
</div>
<!-- New unit button -->
<mat-divider></mat-divider>
<mat-card-actions>
<button mat-raised-button (click)="addUnit()">
<mat-icon>add box</mat-icon>
Add Other Product
</button>
</mat-card-actions>
<button mat-raised-button (click)="addSupplement()">
<mat-icon>add box</mat-icon>
Add Supplement
</button>
</div>
</div>
<!-- End form units array -->
</form>
</div>
</div>
</div>][1]][1]

Having the below when the getUnit() function is called apparently binds it in the sense it will operate independently and without conflicts.
private getUnit(): FormGroup {
const formGroup = this._fb.group({
supplementName: [''],
review: [''],
rating: [''],
notes: [''],
tags: ['']
});
formGroup.get('supplementName').valueChanges
.debounceTime(300)
.distinctUntilChanged()
.switchMap((search) => this.getSupplements.search_supplement_by_category(search))
.subscribe((products) => {
this.supplementResults = products;
});
return formGroup;
}

Hide an HTML element using *ngIf when a user clicks outside of the specific element (Angular)

How can I add an eventlistener on a <div> or other element, to hide something I am displaying via an *ngIf - using Angular, when I click away from that element?
Explanation: I am showing a custom CSS dropdown via *ngIf when you click on <label>Filter</label>, and I want the user to be able to click as many times as they wish in the custom dropdown, but when they click outside the custom dropdown, I would like to hide the custom dropdown via the *ngIf again.
The method called when a user clicks on the label is showHideSectionOptions(), which toggles the showHide variable to true or false.
This is my HTML code:
showHide = false;
<div class="form-row">
<div class="form-group" id="showAndHideSections">
<label (click)="showHideSectionOptions()">
<img src="../../../assets/icons/Filter.png" alt="" class="mr-3">Filter</label>
<div *ngIf="showHide" class="section-options">
// show or hide content
</div>
</div>
</div>
This is my component code:
showHideSectionOptions() {
this.showHide = !this.showHide;
}
I have tried adding an eventlistener as per the below, but I cannot set the value of my showHide variable, as I get the following error: Property 'showHide' does not exist on type 'HTMLElement'.ts(2339):
body.addEventListener('click', function() {
alert('wrapper');
}, false);
except.addEventListener('click', function(ev) {
alert('except');
ev.stopPropagation();
}, false);
Thanks in advance!

First of all, this already has an answer here
However, if you want an Angular solution, you can use a custom directive:
#Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
#Output()
readonly clickOutside = new EventEmitter<MouseEvent>();
#Input()
include?: HTMLElement;
constructor(private el: ElementRef<HTMLElement>) {}
#HostListener('window:click', [ '$event' ])
onClick(event: MouseEvent): void {
if (this.isEventOutside(event)) {
this.clickOutside.emit(this.event);
}
}
private isEventOutside(event: MouseEvent): boolean {
const target = event.target as HTMLElement;
return !this.el.nativeElement.contains(target) &&
(!this.include || !this.include.contains(target))
}
}
Which you can use like this:
<div class="form-group" id="showAndHideSections">
<label (click)="showHideSectionOptions()" #label>
<img src="../../../assets/icons/Filter.png" alt="" class="mr-3">
Filter
</label>
<div *ngIf="showHide" class="section-options"
[include]="label" (clickOutside)="showHide = false">
// show or hide content
</div>
</div>
A more performant one would be one running outside of the ngZone. Because the subscribe happens outside of the directive it will be inside the ngZone when subscribing to the Output
#Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
#Input()
include?: HTMLElement;
#Output()
readonly clickOutside = this.nz.runOutsideAngular(
() => fromEvent(window, 'click').pipe(
filter((event: MouseEvent) => this.isEventOutside(event))
)
);
constructor(private el: ElementRef<HTMLElement>, private nz: NgZone) {}
private isEventOutside(event: MouseEvent): boolean {
const target = event.target as HTMLElement;
return !this.el.nativeElement.contains(target) &&
(!this.include || !this.include.contains(target))
}
}
working stack

How to route dynamically between tabs?

I have mat-tab angular app.And I want to get links dynamically and transfer to navLinks object.I did but it doesn't work.Its okay to give string like './1' for id parameter but I made concatanation and it doesnt work(I checked that concatenation is correct).Here's what I tried below
TS File
export class CarsComponent implements OnInit {
navLinks: any[];
public href: string = "";
activeLinkIndex = -1;
mySubject;
ngOnInit(): void {
this.href = this.router.url;
console.log(this.router.url);
this.router.events.subscribe((res) => {
this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
});
this.mySubject=this.carService.carrierSubject.subscribe(value=>
{
this.id=value;
let numid=this.id.toString();
this.newString="./".concat(numid);
console.log(this.newString);
})
}
newString:string='';
id:number;
car:Car;
constructor(private carService:CarService,private route: ActivatedRoute,private router: Router) {
this.navLinks = [
{
label: 'Preview',
link: this.newString,
index: 0
}, {
label: 'Tuning',
link: './tabtest2',
index: 1
}, {
label: 'Payment',
link: './tabtest3',
index: 2
},
];
}
HTML
<div class="row">
<div class="col-md-5">
<app-car-list></app-car-list>
</div>
<div class="col-md-7">
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</a>
</nav>
<router-outlet></router-outlet>
</div>
</div>

I copied your implementation and get and error regarding the handling of the "routerLinkActive" (Angular 8.1.2). The following change in the template worked for me:
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.link"
routerLinkActive="active">
{{ link.label }}
</a>
Angular adds an '.active' class automatically if a route is active. You can style an active route with your css afterwards.

Pass item from ngFor on click to an Object of other page

I´m trying to push an item from my ngFor-Loop to an Object of another page. Unfortunately I don´t access to the Object.
HTML home.html
<ion-card class="card card-ios" *ngFor="let card of cardArray; let i = index">
....
<button class="favButton" ion-button icon-start clear (click)="addFavourite(card, i)">
JS home.ts
public cardFavouriteArray: any = [];
cardFavouriteArray: any = [];
addFavourite(card, i) {
this.cardFavouriteArray.push(card);
}
HTML favourites.html
<ion-card class="card card-ios" *ngFor="let card of favouriteArray; let i = index">
JS favourites.ts
favouriteArray: any = [];
ionViewDidLoad() {
this.favouriteArray = this.cardFavouriteArray;
}
This do not work. I get an issue "property "cardFavouriteArray" does not exist on type FavouritesPage.

You could consider here passing favorite favorite object while navigating between the pages. Thereafter once you land on the page. On that component look for the passed object
constructor(private navCtrl: NavController) {}
addFavourite(card, i) {
this.cardFavouriteArray.push(card);
}
navigateToOtherPage(){
this.navCtrl.push(FavoritesPage, this.cardFavouriteArray);
}
Code
#Component({
...
})
class OtherPage {
constructor(private navParams: NavParams) {
console.log("navParams", navParams)
}
}
Read more on NavController

How to solve it with localStorage
We can use localStorage's .getItem and .setItem to keep the information between pages. If you weren't writing in a Framework, this would probably be the way to go.
addFavourite(card, i) {
this.cardFavouriteArray.push(card);
localStorage.setItem('cardFavouriteArray', JSON.stringify(this.cardFavouriteArray))
}
...
ionViewDidLoad() {
this.favouriteArray = JSON.parse(localStorage.getItem('cardFavouriteArray'));
}