I am using Carbon Design System to design a form. The problem that I am facing is that only the first bit is being shown (i.e the input). The textarea
underneath doesn't come up. I cannot figure out why this is happening and would really appreciate some help. Here is the HTML:
<main>
<form (ngSubmit)="processChange.emit(process)" [gap]="6" cdsStack="vertical">
<h3>Create a new process</h3>
<div class="form-group">
<cds-text-label [textInputTemplate]="label">
Process Name
<ng-template #label>
<input [(ngModel)]="process.label" cdsText maxlength="255" name="label" placeholder="Process Name" required
[readOnly]="!editable">
</ng-template>
</cds-text-label>
</div>
<div class="form-group">
<cds-textarea-label [textAreaTemplate]="description">
Process Description Here
<ng-template #description>
<textarea [readOnly]="!editable" [(ngModel)]="process.description" cdsTextArea name="description"
placeholder="Description" class="textarea" required></textarea>
</ng-template>
</cds-textarea-label>
</div>
</form>
</main>
And the scss:
@use '@carbon/styles/scss/spacing' as *;
main {
margin-top: $spacing-06;
}
All this does is display the cds-text-label
and the input
. However, I cannot see the cds-textarea-label
and the textarea
underneath it. If I flip them around then I will see the textarea
but not the input
.