chore(deps): update ngx-markdown to version 21.0.1 and related dependencies

refactor: simplify imports in example components and update validation error handling

Author: sonusindhu

package-lock.json

@@ -23,7 +23,7 @@
  "@angular/router": "^21.0.3",
  "@tailwindcss/postcss": "^4.1.3",
  "clipboard": "^2.0.11",
- "ngx-markdown": "^20.1.0",
+ "ngx-markdown": "^21.0.1",
  "postcss": "^8.5.3",
  "rxjs": "~7.8.0",
  "tailwindcss": "^4.1.3",

package.json

@@ -1,5 +1,5 @@
 import { Component, effect, signal } from '@angular/core';
-import { form, required, email, minLength, pattern, schema, Field, FieldPath, validate, customError, FieldValidator, PathKind } from '@angular/forms/signals';
+import { form, required, email, minLength, pattern, schema, Field, validate, customError, FieldValidator, PathKind } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';

src/app/examples/signal-form/example3/example3.component.ts

@@ -1,5 +1,5 @@
 import { Component, effect, signal } from '@angular/core';
-import { form, required, email, minLength, pattern, schema, Field, FieldPath, validate, customError, applyEach, validateTree } from '@angular/forms/signals';
+import { form, required, schema, Field, applyEach } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatCardModule } from '@angular/material/card';

src/app/examples/signal-form/example4/example4.component.ts

@@ -36,11 +36,11 @@ const userProjectsSchema = schema<UserProjects>((f) => {
  required(project.deadline, { message: 'Deadline is required' });
  required(project.status, { message: 'Status is required' });
 
- validateTree(project.deadline, ({ value, fieldOf }) => {
+ validateTree(project.deadline, ({ value, fieldTreeOf }) => {
  const errors: ValidationError[] = [];
  const isNotValid = value() && new Date(value()) < new Date();
  if (isNotValid) {
- errors.push(customError({ kind: 'deadlinePast', field: fieldOf(project.deadline), message: 'Deadline must be in the future' }));
+ errors.push(customError({ kind: 'deadlinePast', field: fieldTreeOf(project.deadline), message: 'Deadline must be in the future' }));
  }
  return errors;
  });
@@ -51,11 +51,11 @@ const userProjectsSchema = schema<UserProjects>((f) => {
  minLength(task.title, 2, { message: 'Task title must be at least 2 characters' });
  required(task.priority, { message: 'Priority is required' });
  required(task.dueDate, { message: 'Due date is required' });
- validateTree(task.dueDate, ({ value, fieldOf }) => {
+ validateTree(task.dueDate, ({ value, fieldTreeOf }) => {
  const errors: ValidationError[] = [];
  const isNotValid = value() && new Date(value()) < new Date();
  if (isNotValid) {
- errors.push(customError({ kind: 'dueDatePast', field: fieldOf(task.dueDate), message: 'Due date must be in the future' }));
+ errors.push(customError({ kind: 'dueDatePast', field: fieldTreeOf(task.dueDate), message: 'Due date must be in the future' }));
  }
  return errors;
  });

src/app/examples/signal-form/example6/example6.component.ts

@@ -33,11 +33,11 @@ const userProjectsSchema = schema<UserProjects>((f) => {
  minLength(project.name, 3, { message: 'Project name must be at least 3 characters' });
  required(project.deadline, { message: 'Deadline is required' });
  required(project.status, { message: 'Status is required' });
- validateTree(project.deadline, ({ value, fieldOf }) => {
+ validateTree(project.deadline, ({ value, fieldTreeOf }) => {
  const errors: ValidationError[] = [];
  const isNotValid = value() && new Date(value()) < new Date();
  if (isNotValid) {
- errors.push(customError({ kind: 'deadlinePast', field: fieldOf(project.deadline), message: 'Deadline must be in the future' }));
+ errors.push(customError({ kind: 'deadlinePast', field: fieldTreeOf(project.deadline), message: 'Deadline must be in the future' }));
  }
  return errors;
  });
@@ -46,11 +46,11 @@ const userProjectsSchema = schema<UserProjects>((f) => {
  minLength(task.title, 2, { message: 'Task title must be at least 2 characters' });
  required(task.priority, { message: 'Priority is required' });
  required(task.dueDate, { message: 'Due date is required' });
- validateTree(task.dueDate, ({ value, fieldOf }) => {
+ validateTree(task.dueDate, ({ value, fieldTreeOf }) => {
  const errors: ValidationError[] = [];
  const isNotValid = value() && new Date(value()) < new Date();
  if (isNotValid) {
- errors.push(customError({ kind: 'dueDatePast', field: fieldOf(task.dueDate), message: 'Due date must be in the future' }));
+ errors.push(customError({ kind: 'dueDatePast', field: fieldTreeOf(task.dueDate), message: 'Due date must be in the future' }));
  }
  return errors;
  });

src/assets/examples/signal-forms/example6/example6.component.ts.md

@@ -2,7 +2,7 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { provideRouter, withPreloading } from '@angular/router';
 import { ROUTES } from './app-routings';
-import { provideZoneChangeDetection, SecurityContext } from '@angular/core';
+import { provideZoneChangeDetection } from '@angular/core';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { CLIPBOARD_OPTIONS, provideMarkdown } from 'ngx-markdown';
 import { HttpClient, provideHttpClient, withInterceptors } from '@angular/common/http';
@@ -20,7 +20,6 @@ bootstrapApplication(AppComponent, {
  provideZoneChangeDetection(),
  provideAnimationsAsync(),
  provideMarkdown({
- sanitize: SecurityContext.NONE,
  loader: HttpClient,
  clipboardOptions: {
  provide: CLIPBOARD_OPTIONS,