动态表单单例?

Dynamic forms singleton?

我正在尝试理解 angular 中的动态表单部分,但不确定我是否理解正确。

比如:我用form控件建一个formgroup,通过input传给另一个组件

动态形式-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 组件中,此表单将被更改我的意思是字段将填充用户选择的数据选项。

当他完成后,用户将被按下 'save' 数据是如何更新的?我的意思是我不需要将值发送回父组件? (从 app-question > dynamic-form 发送新的表单数据)表单是单例服务吗?那么子组件内部的每一次更改,都会对父表单进行更改吗?

罗伯托,当你使用@Input 时,输入是一个 object,你不需要使用输出,因为你传递了 object 的 "reference"。

一个愚蠢的例子

Parent

@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)
  }
}

用app-question 作为@Input "form" 和"question" 传递。这是因为应用程序的变化改变了形式:它是同一个控件! (不是因为表格有点像 "singelton")