CODEWITHSUNDEEP
angularangular-material
Arter
Arter

Reputation: 2324

Drag and drop form elements

I try to create form where users can custom create form questions.

Here is a full example, but I have a problem when I DROP elements, in this way they don't stay in DROP zone.

If I try to set form elements in the array like bellow, then they are not rendered in HTML

formElements = [
        '<mat-form-field class="example-full-width"><input matInput placeholder="Favorite food" value="Sushi/></mat-form-field><br /><mat-form-field>',
        '<mat-label>Select an option</mat-label><mat-select><mat-option>None</mat-option><mat-option value="option1">Option 1</mat-option><mat-option value="option2">Option 2</mat-option><mat-option value="option3">Option 3</mat-option></mat-select></mat-form-field>',
        '<mat-radio-group aria-label="Select an option"><mat-radio-button value="1">Option 1</mat-radio-button><mat-radio-button value="2">Option 2</mat-radio-button></mat-radio-group><mat-slide-toggle>Slide me!</mat-slide-toggle>'
    ];

Please take a look at example

Upvotes: 0

Views: 508

Answers (1)

BartoszTermena
BartoszTermena

Reputation: 1487

Add to your cdk-drag-drop-connected-sorting-example.ts declarationquestionnaire = []; :

export class CdkDragDropConnectedSortingExample {
formElements = [];
questionnaire = []; ...

Then should work.

Hope it helps!

Upvotes: 1

Related Questions