Angular 角度窗体控件数据未从视图更新
我正在尝试使用ReactiveFormsModule从FormGroup读取数据。但是,我遇到了问题,表单字段的值总是空的 我有一个加载子模块“ByHModule”的路径,在这个路径中,每个组件都有另一个路径。在本例中为“卡特拉”Angular 角度窗体控件数据未从视图更新,angular,angular-reactive-forms,reactive-forms,Angular,Angular Reactive Forms,Reactive Forms,我正在尝试使用ReactiveFormsModule从FormGroup读取数据。但是,我遇到了问题,表单字段的值总是空的 我有一个加载子模块“ByHModule”的路径,在这个路径中,每个组件都有另一个路径。在本例中为“卡特拉” ... path: 'Cartera', component: CarteraComponent, ... 我已经在byh.modules.ts中加载了FormsModule和ReactiveFormsModule,它们路由到“Cartera”组件。加载后,它将显示
...
path: 'Cartera',
component: CarteraComponent,
...
我已经在byh.modules.ts中加载了FormsModule和ReactiveFormsModule,它们路由到“Cartera”组件。加载后,它将显示一个表单,其中包含一个文本输入和一个文本区域。我想在提交表单时获取表单的数据
卡特尔组件的代码如下所示:
从'@angular/core'导入{Component,OnInit};
从'@angular/forms'导入{FormGroup,FormBuilder};
@组成部分({
选择器:“ngx byh cartera”,
templateUrl:'byh cartera.component.html',
styleURL:['./byh cartera.component.scss'],
})
导出类CarteraComponent实现OnInit{
nuevaCarteraForm:FormGroup;
恩戈尼尼特(){
this.nuevaCarteraForm=this.fb.group({
名称:[''],
额外:['']
});
}
构造函数(私有fb:FormBuilder){
}
onSubmit(){
log(JSON.stringify(this.nuevaCarteraForm.value));
}
}
“byh cartera.component.html”:
{{nuevaCarteraForm.value | json}
克雷尔
当我点击Submit时,控制台显示:{“nombre”:“extra”:“}不管我在表单中写什么。在HTML中将
FormControlName
更改为FormControlName
,并将表单传递给Submit
HTML
<div class="row">
<div class="col-lg-6">
<nb-card>
<nb-card-header></nb-card-header>
<nb-card-body>
<form [formGroup]= "nuevaCarteraForm" (ngSubmit)="onSubmit(nuevaCarteraForm)" novalidate>
<div class="input-group">
<input type="text" nbInput fullWidth placeholder="Nombre de la cartera" formControlName="nombre">
</div>
<div class="input-group">
<textarea rows="5" nbInput fullWidth placeholder="Comentarios" formControlName="extra">{{nuevaCarteraForm.value | json}}</textarea>
</div>
<button type="submit" class="btn btn-danger" >Crear</button>
</form>
</nb-card-body>
</nb-card>
</div>
</div>
非常感谢。它起作用了,只是formControlName中的小写字母。第二部分不是强制性的,“nuevaCarteraForm”变量包含表单的值,因此它可以是:console.log(JSON.stringify(this.nuevaCarteraForm.value))。但是非常感谢你!
onSubmit(form: FormControl){
console.log(JSON.stringify(this.form.value));
}