FormGroup 无法使用 FormBulider 解析

Posted 2023-02-22

【中文标题】FormGroup 无法使用 FormBulider 解析

【英文标题】：FormGroup not resolving with FormBulider

【发布时间】：2017-06-03 12:04:43

【问题描述】：

我正在使用 angular 2 并坚持使用 FormBuilder 和 FormGroup 。在提交表单时，我将传递 FormGroup 类型的 form.value。

当我要访问我的属性并重新启动 lite 服务器时，它不会启动应用程序并抛出 userName 属性未定义 FieldGroup 的异常。

代码 sn-p 是：

import  Component  from '@angular/core';
import  FormBuilder,FormGroup from '@angular/forms';
import  LoginService  from '../../services/login.service'; 

@Component(
  selector: 'login-selector',
  templateUrl: './app/components/login/login.component.html',
)

export class LoginComponent   

    form:FormGroup;


    constructor(
        private formBuilder:FormBuilder)

    
    ngOnInit() 
        this.form=this.formBuilder.group(
            userName:this.formBuilder.control(''),
            password:this.formBuilder.control(''),
            remember:this.formBuilder.control(''),
            textCaptcha:this.formBuilder.control('')
        );
    
onSubmit(loginForm:FormGroup)
        alert(`UserName is `+loginForm+`
            and password is `+loginForm);   
    

HTML

<form id="loginform" class="form-horizontal" role="form" [formGroup]="form" (ngSubmit) = "onSubmit(form.value)">

<div style="margin-bottom: 25px" class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
      <input id="password" ngModel  type="password" class="form-control" name="password" placeholder="password" formControlName="password">
  </div>
 <div class="col-sm-12 controls">
    <button type="submit" class="btn btn-primary">Login  </button>
    <a id="btn-login" href="#" (click)="reset()" class="btn btn-warning">Reset  </a>
  </div>

如果我添加警报，该属性正在工作，但是在重新启动服务器时它会抛出错误并且必须删除该属性。所以我不能使用表单值

alert(`UserName is `+loginForm.userName+`
            and password is `+loginForm.password);

错误是

app/components/login/login.component.ts(50,34): error TS2339: Property 'userName
' does not exist on type 'FormGroup'.

【问题讨论】：

我认为您没有正确访问该值。试试this.loginForm.get('userName') 或this.loginForm.get('userName').value。或者，甚至是this.loginForm.controls.userName，或this.loginForm.controls.userName.value。

【参考方案1】：

试试这个：loginForm.value.userName

loginForm.value 包含具有以下所有属性的对象：

  userName: "asdfasdf",
  password: "asdfas"

【参考方案2】：

我通过创建接口并将接口引用传递给表单提交函数解决了这个问题

interface User
    userName:string,
    password:string,
    textcaptcha:string,
    remember:boolean


onSubmit(loginForm:User)
        alert(loginForm.userName);
    

现在重启服务器不会抛出任何错误