Question

我试图以角度理解动态表单部分，但不确定自己是否正确理解。

例如：我用表单控件构建一个表单组，然后通过输入将其发送到另一个组件。

dynamic-form-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>

dynamic-form.component.ts：

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

在app-question组件中，此表单将被更改，这意味着字段将填充用户选择的数据选项。

当他完成操作时，用户将被按“保存”，如何更新数据？我的意思是我不需要将值发送回父组件？（从app-question> dynamic-form发送新表单数据）表单是单例服务吗？因此，子组件内部的每项更改也要在父表单中进行更改吗？

Answer 1

Roberto，当您使用@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}
}

孩子

@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”）

动态表单单例吗？

1 个答案: