Cannot access the nested formGroup's value

Issue I am creating nested formGroup fields. The following is my html <form [formGroup]=”userProfileForm” (ngSubmit)=”bookUser()” class=”form”> <!– userName –> <div class=”form-group”> <label for=”userName”>Name:</label> <input type=”text” class=”form-control” id=”userName” formControlName=”userName”> </div> <!– mobile –> <div class=”form-group”> <label for=”mobileNumber”>Mobile:</label> <input type=”text” class=”form-control” id=”mobileNumber”

Continue reading

Angular 2+ Custom form validation breaks the form methods

Issue I have a form: public buildUserForm(user: User = null): void { this.selectedUserForm = this.fb.group({ id: 0, isActive: [true], isSuperUser: [null], firstName: [”, Validators.required], lastName: [”, Validators.required], username: [”, [Validators.required, UniqueNameValidator(this.userNamesList, user)]], password: [”, Validators.pattern(‘^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=\\D*\\d)[A-Za-z\\d!$%@#£€*?&]{8,}$’)], emailAddress: [”, Validators.email], businessEmailAddress: [”,

Continue reading

show class for only clicked item angular 2

Issue I don’t know how to set visible class only for clicked item in partial component. So, I’ve temaplate with: <div class=”photo-container” *ngFor =”let i of modalImages; let index = index”> <div [ngClass]=”ImageContainer”> <i class=”ionicons ion-ios-close remove-icon” (click)=”deleteImageEvent(index)”></i> <img (click)=”onImageClickEvent(index)”

Continue reading

Binding same mouseover event to multiple [ngClass]

Issue <li class=”dropdown-submenu dropdown pointer” (mouseover)=”toogleClickEvent($event)” (mouseout)=”toogleClickEvent($event)” [ngClass]=”show”> <a class=”test” tabindex=”-1″><i class=”fa fa-language ” aria-hidden=”true”></i>{{‘Language’ | translate}}</a> <ul class=”dropdown-menu”> <li class=”pointer”><a (click)=”changeLang(‘en’)”>{{‘English’ | translate}}</a></li> </ul> </li> <li class=”dropdown-submenu dropdown pointer” (mouseover)=”toogleClickEvent($event)” (mouseout)=”toogleClickEvent($event)” [ngClass]=”show1″> <a href=”#”><i class=”fa fa-gear” aria-hidden=”true”></i>&nbsp;&nbsp;{{‘Settings’ | translate}}</a>

Continue reading

No NgClass reaction to the function

Issue I use a function in NgClass that uses an array filled in ngOnInit. ngOnInit -> prepareRezerwation() create colorRezerwation veriable: this.nodeService.getRezerwations(this.minMax).subscribe(rezerwations => { this.prepareRezerwation(rezerwations); // this.functionsService.showRezerwation(post, this.openingHours); // this.showSpinner = false; }, error => { console.log(“Connection problem”) }); html ->

Continue reading

Ngclass function with 2 objects

Issue is it possible to add 2 objects to an ngclass function like <div class=”progress-bar”[ngClass]=”getProgressValues(obj.val1,obj.val2)”> </div> i get a Json error. SyntaxError: JSON.parse: bad control character in string literal at line 1 column 2 of the JSON data i tried

Continue reading

How to retrieve data from ngx-modal on submit angular 5

Issue I am using ngx-modal to create dialog, below is the code in html <button (click)=”myModal.open()”>Click Me</button> <modal #myModal cancelButtonLabel=”Cancel All [(ngModel)]=”rfin” submitButtonLabel=”submit” (onSubmit)=”callSubmit()”> <modal-content > <mat-card> <mat-card-content > <h2 class=”example-h2″>Select Emp</h2><br> <section class=”example-section” *ngFor=”let ep of emp” > <ng-template>

Continue reading

TS Observable & ng: proper templating syntax

Issue I have an observable “applicationDetail” (private applicationDetail: Observable<ApplicationDetail>;). I bind the values like this: <h2 class=”detailViewH2″>{{ (applicationDetail | async)?.AttendeeName }}</h2> <p>{{ (applicationDetail | async)?.AttendeeFunction }} </p> This doesn’t seem like proper templating syntax to me, isn’t there a way

Continue reading

Angular 5/6 Resolver and Observable

Issue I’m literally going crazy trying to use a Resolver in Angular 6. My Resolver, working version: @Injectable() export class MyResolver implements Resolve<boolean> { constructor() { } resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean { return true; }

Continue reading

ngOnInit is calling before resolver data is ready

Issue I have a resolve that is calling getSchools() from service resolver.ts export abstract class APIResolverService implements Resolve<any> { constructor(readonly dropdownService:DropDownOptionsService,readonly route:ActivatedRoute) { } abstract resolve(); } export class APISchoolsresolve extends APIResolverService{ resolve(){ this.route.queryParams.subscribe(params => { let district = params[‘district’];

Continue reading

Locale time on IONIC2 Datetime picker

Issue I’m working with IONIC2, Angular2 and Typescript. I have an Datetime working as follows: page.html <ion-datetime displayFormat=”DD MMMM YYYY” pickerFormat=”DD MMMM YYYY” [(ngModel)]=”date”></ion-datetime> page.ts date: string = new Date().toISOString(); The ion-datetime field shows time with an hour less, how

Continue reading