Questions on Kendo UI for Angular Forum

2 answers

168 views

Issue with kendo-formfield in Customized FormFieldComponent: "The kendo-formfield component should contain only one control" Error

Hello Team

I’m encountering an issue with the kendo-formfield component when used within my custom wrapper component, FormFieldComponent. Even though I am passing a single form control with formControlName, the component keeps throwing the following error:

Error: The `kendo-formfield` component should contain only one control of type NgControl with a formControlName or an ngModel binding.

My Setup:

I’ve created a custom wrapper component, FormFieldComponent, which looks like this:

import { Component, Input, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { InputsModule, Orientation, ShowOptions } from '@progress/kendo-angular-inputs';

@Component({
  selector: 'mnp-form-field',
  standalone: true,
  imports: [CommonModule, InputsModule],
  encapsulation: ViewEncapsulation.None,
  template: `
    <kendo-formfield [orientation]="orientation!" [showErrors]="showErrors!" [showHints]="showHints!">
      <ng-content></ng-content>
    </kendo-formfield>
  `,
  styleUrl: './form-field.component.scss',
})
export class FormFieldComponent {
  @Input() orientation?: Orientation;
  @Input() showErrors?: ShowOptions;
  @Input() showHints?: ShowOptions;
}

In my Storybook story, I’m using this component with a ReactiveFormsModule setup. Here’s the story code:

export const EmailFieldWithFormGroup: Story = {
  render: () => {
    const formBuilder = new FormBuilder();

    const emailForm: FormGroup = formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
    });

    return {
      props: {
        emailForm,
        emailControl: emailForm.get('email'),
        onSubmit: () => {
          if (emailForm.valid) {
            console.log('Form submitted:', emailForm.value);
          } else {
            console.error('Form is invalid');
          }
        },
      },
      template: `
        <form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
          <fieldset>
            <legend>Email Field</legend>
            <mnp-form-field>
              <mnp-label [for]="'email'" text="Email"></mnp-label>
              <mnp-textbox formControlName="email"></mnp-textbox>
              <mnp-form-hint>Enter your email address</mnp-form-hint>
              <mnp-form-error *ngIf="emailForm.controls['email'].invalid && emailForm.controls['email'].touched">
                Error: Please provide a valid email address.
              </mnp-form-error>
            </mnp-form-field>
          </fieldset>
        </form>
      `,
    };
  },
};

FormField

Forms

answered on 03 Dec 2024

1 answer

82 views

Using a grid layout for k-form

Is there a built-in Kendo form class for a grid-type layout? I know that the GridLayout component is available, was hoping that there was something built-in already that would be more straightforward to implement.

Thanks

Forms

answered on 01 Nov 2024

1 answer

86 views

Dinamically add steps progressbar layout problem.

Hi all,
I'm trying to include steps dinamically, using stepper componenet, everything works fine, but, i have this layout problem with the progress bar.

as you can see, the progress bar don't follow the layout when i add more steps in real time.
Just for explanations, this layout starts with 2 steps, and user can add more steps.

Forms

Stepper

Styling

answered on 05 Jul 2024

0 answers

102 views

formBuilder.group([{counties: [{id: 1, name: "name"}]) converts array to first object

Using formBuilder to create a reactive form when I noticed that it turns array properties in to the first object in the array. This is breaking my multiselect drop down as it is expecting an array.

I create a stack blitz demonstration.

https://stackblitz.com/edit/angular-bnet6z?file=src%2Fapp%2Fapp.component.ts

This is based off of you https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/forms/#toc-reactive-forms demonstration where I changed the form building to use the form builder.

Multiselect then reports these errors.

ERROR

Error: values.reduce is not a function
ERROR

Error: Expected values of array type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding

The workaround is to build the form manually, but it really feels like a bug in formBuilder. Is there something else that will work to prevent formBuilder from reducing arrays?

Forms

MultiSelect

asked on 21 Dec 2023

2 answers

132 views

Selecting a Checkbox Resets Entire Form

Hey everyone,

Hope this message finds you well.

I'm creating a grid table with Add/Edit/Delete features. Currently running into a blocker when clicking on a checkbox during an Add procedure. This action completely resets the values from the dropdown menus I've previously selected from. Any ideas as to why this behavior might be occurring? Thanks!

TS:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/other_api/DataService';
import { ErrorHandlerService } from '../../services/error-handler.service';
import { Item } from '../../models/other_api/Item';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SortDescriptor } from "@progress/kendo-data-query";
import { RemoveEvent, SaveEvent } from '@progress/kendo-angular-grid';
import { AnotherService } from '../../services/other_api/AnotherService';
import { DifferentService } from '../../services/other_api/DifferentService';
import { SomeService } from '../../services/other_api/SomeService';

@Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.scss'],
})
export class ClientComponent implements OnInit {
clients: Item[] = [];
anotherItems: string[] = [];
differentItems: string[] = [];
someItems: string[] = [];
moreItems: string[] = [];
parentItems: string[] = [];

constructor(
private errorHandlerService: ErrorHandlerService,
private dataService: DataService,
private anotherService: AnotherService,
private differentService: DifferentService,
private someService: SomeService,
private formBuilder: FormBuilder,
) {
this.createFormGroup = this.createFormGroup.bind(this);
}

public formGroup: FormGroup = this.formBuilder.group({
Id: 0,
ClientName: '',
ClientKey: '',
ParentClientName: '',
IsParent: false,
MarketVertical: '',
Region: '',
Inactive: false,
Locale: ''
});

public createFormGroup = (args: any): FormGroup => {
const item = args.isNew ? new Item(0, '', '', '', '', '', false, false, '') : args.dataItem;

return this.formBuilder.group({
Id: item.Id,
ClientName: item.ClientName,
ClientKey: item.ClientKey,
ParentClientName: item.ParentClientName,
IsParent: item.IsParent || false,
MarketVertical: item.MarketVertical,
Region: item.Region,
Inactive: item.Inactive || false,
Locale: item.Locale
});
};

public sort: SortDescriptor[] = [
{
field: "Name",
dir: "asc",
},
];

public sortChange(sort: SortDescriptor[]): void {
this.sort = sort;
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
}

ngOnInit(): void {
this.getAllClients();
this.getAnotherItems();
this.getDifferentItems();
this.getSomeItems();
this.getMoreItems();
this.getParentItems();
};

login() {
//Implementation for login
};

showError() {
this.errorHandlerService.handleError("This is a test error. Stuff is super wrong.");
}

getClient(): void {
this.dataService.get(1).subscribe();
}

getAllClients(): void {
this.dataService.getAll().subscribe((data) => {
this.clients = data;
});
}

getAnotherItems(): void {
this.anotherService.getAll().subscribe((data) => {
this.anotherItems = data.map((anotherItem) => anotherItem.Name);
});
}

getDifferentItems(): void {
this.differentService.getAll().subscribe((data) => {
this.differentItems = data.map((differentItem) => differentItem.Description);
});
}

// Similar functions for other services

saveHandler(args: SaveEvent): void {
if (args.isNew) {
this.dataService.create(args.dataItem).subscribe((createdData) => {
const updateItem = this.clients.filter(element => element.ClientName === createdData.ClientName)[0];
updateItem.Id = createdData.Id;
});
}
else {
this.dataService.update(args.formGroup.value).subscribe((updatedData) => {
const updateItem = this.clients.filter(element => element.Id === updatedData.Id)[0];
updateItem.ClientName = updatedData.ClientName;
updateItem.ClientKey = updatedData.ClientKey;
// Similar updates for other properties
});
}
args.sender.closeRow(args.rowIndex);
}

removeHandler(args: RemoveEvent): void {
this.dataService.delete(args.dataItem).subscribe();
}
}

------------------------------

HTML:

</ng-template>
</kendo-grid-column>

<kendo-grid-column [filterable]="true" filter="boolean" field="Inactive" title="Inactive" editor="boolean">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input kendoCheckBox id="InactiveCheckbox" type="checkbox" [checked]="dataItem.Inactive" disabled />
</ng-template>
</kendo-grid-column>

<kendo-grid-command-column title="Actions" [width]="220">
<ng-template kendoGridCellTemplate let-isNew="isNew">
<button kendoGridEditCommand themeColor="info">
Edit
</button>
<button kendoGridRemoveCommand themeColor="error">Remove</button>
<button kendoGridSaveCommand themeColor="success">
{{ isNew ? "Add" : "Update" }}
</button>
<button kendoGridCancelCommand themeColor="warning">
{{ isNew ? "Discard changes" : "Cancel" }}
</button>
</ng-template>
</kendo-grid-command-column>
</kendo-grid>
</ng-template>

<ng-template #footer>
<app-custom-button [buttonText]="'Login'" aria-label="Login" (onClick)="login()"></app-custom-button>
<app-custom-button [buttonText]="'Show Error'" aria-label="Show Error" (onClick)="showError()"></app-custom-button>
</ng-template>
</app-page-layout>

answered on 30 Nov 2023

1 answer

538 views

Custom Component Within form Field

Hello,
I use Kendo UI Angular,
I have a kendomulticombobox in a form, I use this combobox in several forms, and to avoid copying and pasting, I thought of setting up a separate component for that, and just call it each time I need.
It's to say that the form has a formgroup, and that this formgroup has several formcontrols, that I get when I submit the form.
So when I integrate my custom component, I get an error `ERROR Error: No value accessor for form control with name:` and yet it's the same formcontrol that I use before.

Has anyone experienced this kind of problem? Or do you have any solutions please? Thanks

FormField

Forms

MultiColumnComboBox

answered on 15 May 2023

0 answers

128 views

FormArray dropdown filter issue.

I have a FormArray that contains two dropdowns. When I select a value in the parent dropdown, the child dropdown values are filtered accordingly. However, when I use the "add more" button to iterate the form and select a value in the parent dropdown, it affects the child dropdown of all other iterated forms. I want to prevent this from happening so that each iterated form behaves independently of the others.

DropDownList

Forms

asked on 21 Apr 2023

0 answers

736 views

Assign click event to <a> element in <li> list for angular 15

Hello,
I am generating a template that contains a dynamic button panel, and I need to assign a click event to an <a> element within a dynamically generated <li> list. I get the values from a Json object.
The function value of each element of the list comes from a Json object value (fieldChildren.action), but when trying to assign the event (click)="fieldchildren.action", it is not being created correctly.
Please help me with some indication in this regard.
I am using kendo multistep form with angular 15

<ul ngbDropdownMenu id="addoptions" aria-labelledby="Button_Add" class="dropdown-menu">
<li *ngFor = "let campoChildren of campodisplay.children">
<a class="dropdown-item" (click)="campoChildren.action">{{campoChildren.name}}</a>
</li>
</ul>

Forms

asked on 15 Mar 2023

0 answers

161 views

Is it possible to pass a formControl ID / name as a string via a kendo switch on click function?

I'm struggling to access this kendo-switch ID (in this case it should be A1) being passed to the generateSubscriptionArray function it seems to return undefined no matter what variation of attempts to access it I try, it also doesn't seem to show up on the $event if I try to pass this to the function.

Any assistance regarding this would be really beneficial the switch is returning the relevant true/false boolean

HTML

 <kendo-switch
    onLabel=" "
    offLabel=" "
    formControlName="A1"
    id="A1"
    (click)="generateSubscriptionArray(userPreferenceForm.controls.A1.value,
             formcontrol id as string in this case A1 should be passed here)"
    ></kendo-switch>

TypeScript:

exportclass UserPreferencesComponent implements OnInit {
    userPreferenceForm: FormGroup;
    email_address: FormControl;

    constructor() {}

    ngOnInit(): void {
        this.userPreferenceForm = new FormGroup({
            email_address: new FormControl('', Validators.required),
            A1: new FormControl(false),
        });
    }
generateSubscriptionArray = (subscription: boolean, alertID: string): void => {
        if (subscription === true) {
            console.log(subscription, alertID);
        } else {
            console.log(subscription, alertID);
        }
    };

Forms

Switch

asked on 03 Mar 2023

1 answer

309 views

Unable to load package information from registry

I am new at Kendo UI. Already I add the date module normally as a quick cli setup. But when I want to add another module this trough an error.

Example:

Unable to load package information from the registry: Response timeout while trying to fetch https://registry.npmjs.org/@progress%2fkendo-angular-inputs (over 300000ms)

DateInput

Forms

answered on 25 Jan 2023