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);
}
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; = this._spinnerService.spinnerBooleanState;
templateTitle: string = '';
templateId: string = '';
private stepper!: Stepper;
domainSearchResult?: boolean; showContactFrom: boolean = false; submitted = false; searchingSpinner?: boolean = false; keyClicksSubscription: Subscription = new Subscription(); routeParamsSubscription: Subscription = new Subscription(); displaySpinner: BehaviorSubject
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 ``
same as https://github.com/Johann-S/bs-stepper/issues/151