Task Card Form - Copy this Angular, Tailwind Component to your project
<mat card class="example card" appearance="outlined"> <mat card header> <mat card title>Chihuahua</mat card title> </mat card header> <mat card content> <p>{{longText}}</p> </mat card content> <mat card footer class="example card footer"> <mat chip set aria label="Chihuahua traits"> <mat chip>charming</mat chip> <mat chip>graceful</mat chip> <mat chip>sassy</mat chip> </mat chip set> </mat card footer> </mat card>//refer this code and integrate the below code with the above code <form [formGroup]="taskForm" (ngSubmit)="saveTask()"> <div> <label for="title">Title:</label> <input id="title" formControlName="title" /> <div *ngIf="taskForm.get('title')?.invalid && taskForm.get('title')?.touched"> <small *ngIf="taskForm.get('title')?.errors?.['required']">Title is required.</small> <small *ngIf="taskForm.get('title')?.errors?.['minlength']">Title must be at least 3 characters.</small> </div> </div> <div> <label for="description">Description:</label> <textarea id="description" formControlName="description"></textarea> <div *ngIf="taskForm.get('description')?.invalid && taskForm.get('description')?.touched"> <small *ngIf="taskForm.get('description')?.errors?.['required']">Description is required.</small> <small *ngIf="taskForm.get('description')?.errors?.['minlength']">Description must be at least 5 characters.</small> </div> </div> <button type="submit" [disabled]="taskForm.invalid">Save Task</button> </form>
