How to get material mat-autocomplete to allow as valid only a value that is in the option collection amd participate in reactive form validation?

I have a disabled button that I want enabled if the user types a valid value so every key stroke I need to see if it matches.. <mat-form-field appearance=”outline” style=”width: 100%;”> <mat-label>Vendor</mat-label> <input matInput type=”text” [formControl]=”fcVendor” [matAutocomplete]=”auto” (keydown)=”onKeyDownVendorInput($event)” (blur)=”onBlurVendorInput()”> <mat-autocomplete #auto=”matAutocomplete” (optionSelected)=”onClickVendorSelected($event)”> <mat-option *ngFor=”let selectedVendorString of autoFilter | async” [value]=”selectedVendorString”> {{selectedVendorString}} </mat-option> </mat-autocomplete> </mat-form-field> onKeyDownVendorInput(event: […]

How can I keep a material mat-drawer from closing when the user clicks off it?

Be default the drawer closes when you click off it but I only want it to close when the user click the cancel or save button in the drawer. <mat-drawer #drawer mode=”over” position=”end” class=”edit-drawer” disableClose=”false” [opened]=”false” closedStart=”matDrawerClosedStart($event)”> <app-vendor-edit *ngIf=”selectedVendor” [vendor]=”selectedVendor” (save)=”saveVendor($event)” (cancel)=”closeDrawer()” (delete)=”deleteVendor($event)”> </app-vendor-edit> </mat-drawer> Source: Angular Material Quesions

By punkouter
Published
Categorized as angular-material, mat-drawer Tagged ,

How do I make a angular reactive form field that uses mat-error to show validation error as soon form is loaded?

Right now it loads with a blank field and if I click in the field and click out THEN the validation error shows. But I want it to show on page load. This is the HTML get fcnReqDesc() { return this.fgOrderForm.get(‘fcnReqDesc’); } <mat-error *ngIf=”fcnReqDesc.errors” class=”error”> <span *ngIf=”fcnReqDesc.errors.required”> Requisition Description is <strong>required</strong></span> </mat-error> and here is […]

By punkouter
Published
Categorized as angular, angular-reactive-forms Tagged ,

How do I send a @input value into custom validator in angular reactive forms ? It tells me it is undefined [duplicate]

I have an @input object being passed in. That object I need to use in my custom validator but when I try to access it it is UNDEFINED. I guess it is running the validator before the object arrives into the component. My code is here. Am I going about this the wrong way ? […]

By punkouter
Published
Categorized as angular, angular-reactive-forms Tagged ,

How do I dynamically add a data-target attribute to a button in angular?

I have old code that swaps out buttons but that does not work since it creates a extra space in bootstrap. So I want one button and depending on a condition have a data-target on that button or not (to show validations) Can I say in code when trainingForm.invalid then have a data-toggle and when […]

By punkouter
Published
Categorized as angular, attributes, html Tagged , ,

Angular resolve and how to call two services sequentially and not return until they are both complete? [closed]

resolve(): Promise<void | Lookup> { console.log(‘LookupResolver / resolve’); return this.departmentService.getAll().then(response => { this.lookup.department = response; this.lookup.department = this.lookup.department.filter(x => x.internalOrgId !== null); // return this.lookup; //this works for one piece of lookup //order item types this.orderItemTypeService.getAll().then(response => { this.lookup.orderItemType = response; return this.lookup; //this doesnt work for two pieces .. it calls this after it […]

By punkouter
Published
Categorized as angular, angular-resolver, typescript Tagged , ,

Angular material autocomplete not firing off onChange event?

I have a basic autocomplete. A list of objects where I pull out the list of a a string property and want to filter and select on it. Any idea why everything works and I see the list of names. But when I type in the box the filter does not happen ? <mat-form-field> <input […]

In reactive forms how do I create a custom validator that can validate an array of formGroup for no values?

I mean I have an order page that has a dynamic order items collection . I want to require the user to have atleast one item in that array. I understand simple usage of a custom validator but in this case I am not validating a single control but an array. How do I say […]

Why is my HttpRequest object missing Form values when I switch to angular2 jwt AuthHttp?

I had to switch the Http object to AuthHttp but now I can’t see my values.. See code below. export class AttachService { constructor(private injector: Injector, private _http: HttpClient) { } public get http(): AuthHttp { return this.injector.get(AuthHttp); } … AddFileDetails(data: FormData) { return this._http.post<string>(environment.apiUrl + ‘/AddFileDetails/’, data); // return this.http.post(environment.apiUrl + ‘/AddFileDetails/’, data); } […]

By punkouter
Published
Categorized as angular, asp.net-core, jwt-auth Tagged , ,

Angular conversion from FormBuilder. style to FormGroup. How to create Formarray?

I am trying to get some code that works and uses FormBuilder style to work with my FormGroup style component. I need to add a child component that contains a collection. So The working version has: createFormGroup(order: Order): FormGroup { const group = this.fb.group({ id: [order.id], invoiceNumber: [order.invoiceNumber, Validators.required], customerName: [order.customerName, Validators.required], total: [order.total], orderItems: […]

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq