Cannot read properties of null (reading 'classList') at bs-stepper.js:265:17
adrian-badulescu opened this issue · 1 comments
I am trying to implement this library to an angular project as per this StackBlitz example https://stackblitz.com/edit/bs-stepper-angular?file=src%2Fapp%2Fapp.component.ts but I am getting this error.
I mention that I am using the npm package
My implementation:
controller.ts
``
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormArray, FormGroup } from '@angular/forms';
import { IContactForm } from '../interfaces/contactForm';
import { Validators } from '@angular/forms';
import { debounceTime, distinctUntilChanged, filter, fromEvent, map, switchMap, tap, catchError, of, retry, Observable, Subscription, iif, finalize, Subject, BehaviorSubject } from 'rxjs';
import { BackendService } from 'app/services/backend/backend.service';
import { SpinnerService } from 'app/services/spinner/spinner.service';
import { ActivatedRoute } from '@angular/router';
import Stepper from 'bs-stepper';
@component({
selector: 'app-order-form',
templateUrl: './order-form.component.html',
styleUrls: ['./order-form.component.css']
})
export class OrderFormComponent implements OnInit, OnDestroy {
contactForm: FormGroup;
domainSearchResult?: boolean;
showContactFrom: boolean = false;
submitted = false;
searchingSpinner?: boolean = false;
keyClicksSubscription: Subscription = new Subscription();
routeParamsSubscription: Subscription = new Subscription();
displaySpinner: BehaviorSubject = this._spinnerService.spinnerBooleanState;
templateTitle: string = '';
templateId: string = '';
private stepper!: Stepper;
constructor(private _fb: FormBuilder,
private _backendService: BackendService,
private _spinnerService: SpinnerService,
private route: ActivatedRoute) {
this.contactForm = this._fb.group({
webdomain: [null,[Validators.pattern]],
contactForm: this._fb.group({
surname: [null, [Validators.required]],
firstname: [null, [Validators.required]],
email: [null, [Validators.required]],
phone: [null]
})
});
}
get surname() {return this.contactForm.controls.contactForm.get('surname')};
get firstname() {return this.contactForm.controls.contactForm.get('firstname')};
get email() {return this.contactForm.controls.contactForm.get('email')};
get phone() {return this.contactForm.controls.contactForm.get('phone')};
onSubmit() {
this.submitted = true;
// TODO: Use EventEmitter with form value
console.log(this.contactForm.value);
}
keyClicks(): Observable {
const searchBox = document.getElementById('webdomain') as HTMLInputElement;
const keyboardInput = fromEvent(searchBox, 'input').pipe(
map(e => (e.target as HTMLInputElement).value),
filter(text => text.length > 4),
debounceTime(2000),
distinctUntilChanged(),
switchMap(searchTerm => this._backendService.searchDomain(searchTerm))
)
.pipe(
// tap(httpQueryResultAsBoolean => this.addContactFields(httpQueryResultAsBoolean))
)
return keyboardInput;
}
nextStep() {
this.stepper.next();
}
ngOnInit(): void {
this.keyClicksSubscription = this.keyClicks().subscribe(KeyboardEvent => this.domainSearchResult = KeyboardEvent);
this.routeParamsSubscription = this.route.queryParams
.subscribe(params => {
this.templateTitle = params.order;
this.templateId = params.Id;
console.log(Template Title: ${this.templateTitle} - Template Id: ${this.templateId}); // popular
});
this.stepper = new Stepper(document.querySelector('#stepper1'), {
linear: false,
animation: true
})
}
ngOnDestroy(): void {
this.keyClicksSubscription.unsubscribe();
this.routeParamsSubscription.unsubscribe();
}
}
``
component.html
``
</div>
<div class="col-lg-2 col-sm-4 col-xs-4">
</div>
<div class="col-lg-4 col-sm-4 col-xs-4"></div>
</div>
``
Please let me know if you need any other iformation from my side.
Thank you!
same as
#151