Видоизменить форму при переходе на другой URL

Question

у меня есть форма добавления задачи по URL /todo, как мне при переходе на саму задачу по URL /todo/{id}, немного видоизменить эту же самую форму

Компонент с формой

<div class="form-control">
  <form [formGroup]="form" (ngSubmit)="addTodo()">
    <input type="text" placeholder="Title" formControlName="todoTitle">
    <div *ngIf="form.get('todoTitle').invalid && form.get('todoTitle').touched" class="validation">
      <small *ngIf="form.get('todoTitle').errors.required">
        The title is required
      </small>
      <small *ngIf="form.get('todoTitle').errors.invalidSymbol">
        Symbol {{form.get('todoTitle').value.symbolRegex}} is not allowed
      </small>
    </div>

    <textarea class="input-description" type="text" placeholder="Description" formControlName="todoDescription"></textarea>
    <div *ngIf="form.get('todoDescription').invalid && form.get('todoDescription').touched" class="validation">
      <small *ngIf="form.get('todoDescription').errors.invalidSymbol">
        Symbol {{form.get('todoDescription').value.symbolRegex}} is not allowed
      </small>
    </div>
    <div class="add-control">
      <button type="submit" class="add-button" [disabled]="form.invalid">Add</button>
    </div>
  </form>
</div>

Я попытался сделать проверку на id в URL и от этого отображать нужную реализацию формы, сделав метод создания формы

  ngOnInit(): void {
    this.route.params.subscribe(({ id }) => {
      if (id) {
        this.form = this.buildForm();
      } else {
        this.form
      }
    });

    this.form = new FormGroup({
      todoTitle: new FormControl("", [
        Validators.required,
        TodoValidator.validateSymbol,
        Validators.pattern("[a-zA-Z0-9]*"),
      ]),
      todoDescription: new FormControl("", [
        Validators.maxLength(300),
        TodoValidator.validateSymbol,
        Validators.pattern("[a-zA-Z0-9]*"),
      ]),
    });
  }

  buildForm(): FormGroup {
    return new FormGroup({
      todoTitle: new FormControl("", [
        Validators.required,
        TodoValidator.validateSymbol,
        Validators.pattern("[a-zA-Z0-9]*"),
      ]),
      todoDescription: new FormControl("", [
        Validators.maxLength(300),
        TodoValidator.validateSymbol,
        Validators.pattern("[a-zA-Z0-9]*"),
      ]),
      selectCategory: new FormArray([])
    });
  }

  onAddCategory() {
    const control = new FormControl(null, Validators.required);
    (<FormArray>this.form.get('category')).push(control);
  }

Подскажите, как это правильно сделать ?

Answer 1

можно подписаться на изменения в роутинге

import {ResolveEnd, ResolveStart, Router} from '@angular/router';
import {pairwise} from 'rxjs/operators';

export class MyComponent {
  constructor(
    public router: Router,
  ) {
    this.router.events.pipe(pairwise()).subscribe((event) => {
      if (event[0] instanceof ResolveStart && event[1] instanceof ResolveEnd) {
        this.toDoSomething();
      }
    });
  }

  toDoSomething() {
    const queryParams = this.router.routerState.root.queryParams['_value'];
    // ToDo
  }
}

БЛОГ НА HUSL

Видоизменить форму при переходе на другой URL

Ответы (1 шт):