Angular 角度窗体控件数据未从视图更新

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”组件。加载后,它将显示

我正在尝试使用ReactiveFormsModule从FormGroup读取数据。但是,我遇到了问题,表单字段的值总是空的

我有一个加载子模块“ByHModule”的路径,在这个路径中,每个组件都有另一个路径。在本例中为“卡特拉”

...
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));
}