Question

我正在尝试使用ReactiveFormsModule从FormGroup中读取数据。但是，我遇到了麻烦，表单字段的值始终为空。

我有一条路由加载一个子模块'ByHModule'，在这条路由中，每个组件都有一个路由。在这种情况下，“ cartera”

...
path: 'Cartera',
component: CarteraComponent,
...

我已经在byh.modules.ts中加载了FormsModule和ReactiveFormsModule，它们路由到“ Cartera”组件。加载后，它将显示具有一个文本输入和一个文本区域的表单。我想在提交表单时获取表单的数据。

CarteraComponent的代码如下：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'ngx-byh-cartera',
  templateUrl: 'byh-cartera.component.html',
  styleUrls: ['./byh-cartera.component.scss'],
})
export class CarteraComponent implements OnInit{

  nuevaCarteraForm: FormGroup;
  ngOnInit(){
    this.nuevaCarteraForm = this.fb.group({
      nombre: [''],
      extra: ['']
      });
  }
  constructor(private fb: FormBuilder){

  }

  onSubmit(){
    console.log(JSON.stringify(this.nuevaCarteraForm.value));
  }
}

'byh-cartera.component.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()" 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>

当我单击Submit时，控制台将显示：{“ nombre”：“”，“ extra”：“”}}不管我在表单中写什么。

Answer 1

在HTML中，将FormControlName更改为formControlName，然后将表单传递给提交。

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>

TS

onSubmit(form: FormControl){
   console.log(JSON.stringify(this.form.value));
}

Angular FormControl数据未从视图更新

1 个答案: