Динамические формы синглтона?

Question

Я пытаюсь понять раздел динамических форм в угловых, и я не уверен, что я правильно понимаю.

Например: я создаю группу форм с контролем формы и отправляю ее другому компоненту с помощью ввода.

динамическая форма-component.html:

<div>
    <form (ngSubmit)="onSubmit()" [formGroup]="form">
        <div *ngFor="let question of questions" class="form-row">
            <app-question [question]="question" [form]="form"></app-question>
        </div>

        <div class="form-row">
            <button type="submit" [disabled]="!form.valid">Save</button>
        </div>
    </form>

    <div *ngIf="payLoad" class="form-row">
        <strong>Saved the following values</strong><br>{{payLoad}}
    </div>
</div>

динамические-form.component.ts:

   onSubmit() {
    this.payLoad = JSON.stringify(this.form.value);
  }

В компоненте app-question эта форма будет изменена. Я имею в виду, что поля будут заполнены параметрами данных, выбранными пользователем.

А когда он это сделает, пользователь нажмет на кнопку «сохранить», насколько актуальны данные? Я имею в виду, мне не нужно отправлять значения обратно в родительский компонент? (отправить новые данные формы из app-question> dynamic-form) является ли форма синглтоноподобной службой? Таким образом, каждое изменение внутри дочерних компонентов также вносит изменения в родительскую форму?

Answer 1

Роберто, когда вы используете @Input и вход является объектом, вам не нужно использовать выход, потому что вы передаете «ссылку» на объект.

Глупый пример

Родитель

@Component({
  selector: 'my-app',
  template: `
  <child [object]="object"></child>
  {{object|json}}` //<--after 1 seconds you can see { "property1": 1, "property2": 3 }
})
export class AppComponent {
  object={property1:1,property2:2}
}

Child

@Component({
  selector: 'child',
  template: `child`
})
export class HelloComponent implements OnInit  {
  @Input() name: any;
  ngOnInit()
  {
     setTimeout(()=>{
        this.name.property2=3
     },1000)
  }
}

С приложением-вопрос передайте в качестве @Input "форму" и "вопрос". Это потому, что изменения в приложении меняют форму: это тот же элемент управления! (не потому, что форма была чем-то вроде «сингелтона»)