动态表单单例?
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")
我正在尝试理解 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")