How to properly handle a form with toggled components?

Question

Angular

Good day,
today I stumbled upon a problem related to forms, or rather, to rummaged components:

<form #testForm="ngForm">
  <input type="text" name="test1" ngModel>
  <test-input></test-input>
  <test-select></test-select>
  <button (click)=test(testForm.value)>Test</button>
</form>

What is the correct way to take values ​​from shared components?

Answer 1

What does shared components mean?

<test-input></test-input>
  <test-select></test-select>

If you are talking about them, then it is more correctly called (child directives) in relation to the one in which they are called.
If you want to pass a value into them, you need to use decorators to accept those values.

import { Component, Input } from '@angular/core';
  
  @Component({
     selector: 'test-input'
  })

  export class TestInputComponent {
     // Тут значение принимается!
     // Тип значения должен стоять тот, который ожидается
    // @Input() - это то что называется декоратором, он служит для передачи значений между директивами
     @Input()
      value: any;
  }