AngularDart:使用 Reactive Form Builder 创建表单 [英] AngularDart: Creating a Form with Reactive Form Builder

问题描述

我正在尝试使用 AngularDart 5、angular_forms 2 创建.API 似乎与 angular_forms 1 非常不同，我无法弄清楚如何使用 FormBuilder 和 ControlGroupFormGroup代码>.下面是我的代码.

LoginComponent.dart

import 'dart:convert';导入'包:角度/角度.dart';导入'包:angular_forms/angular_forms.dart';@成分(选择器:'登录补偿'，templateUrl: 'login_component.html',styleUrls: ['login_component.css'],指令:[formDirectives, coreDirectives])类 LoginComponent 实现 OnInit {控制组 ctrlGrp;登录组件(){this._createForm();}无效_createForm(){final email = Control('', Validators.required);最终密码 = Control('', Validators.compose([Validators.required, Validators.minLength(8)]));this.ctrlGrp =FormBuilder.controlGroup({'email': email, 'password': password});}@覆盖无效 ngOnInit() {}无效提交(){}}

login_component.html

<div class="form-wrapper text-center"><h2 class="text-center">登录</h2><form novalidate #f="ngForm" (ngSubmit)="submit()"><div ngControlGroup="ctrlGrp"><div class="form-group"><input type="email" ngControl="email" class="form-control" id="email-input"placeholder="输入电子邮件" formControlName="电子邮件"/>
<div class="form-group"><input type="password" ngControl="password" class="form-control" id="password-input"placeholder="输入密码" formControlName="密码"/>

<button type="submit" class="btn btn-primary" [disabled]="!f.valid">提交</button></表单><small><a [routerLink]="'/signup'">需要账户吗?</a></small>

pubspec.yaml

环境:sdk: '>=2.0.0 <3.0.0'依赖:角度:^5.0.0ng_bootstrap: ^1.1.1sass_builder: ^2.0.0angular_router: ^2.0.0-alpha+19angular_forms:^2.1.1dev_dependencies:角度测试:^2.0.0build_runner: ^1.0.0构建测试:^0.10.2build_web_compilers: ^0.4.0测试:^1.0.0

• 如何使用 angular_forms 2 创建 FormGroup?
• 如何将 from 组绑定到 html 模板中的 formGroup 属性?

谢谢.

解决方案

在你的表单标签中添加 ngFormModel:

<form novalidate #f="ngForm" (ngSubmit)="submit()" [ngFormModel]="ctrlGrp"></form>

I'm trying to create from using AngularDart 5, angular_forms 2. The API seems to be very different from angular_forms 1 and I cannot figure out how to create a FormGroup using FormBuilder and ControlGroup. Below is my code.

LoginComponent.dart

import 'dart:convert';

import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
    selector: 'login-comp',
    templateUrl: 'login_component.html',
    styleUrls: ['login_component.css'],
    directives: [formDirectives, coreDirectives])
class LoginComponent implements OnInit {
  ControlGroup ctrlGrp;

  LoginComponent() {
    this._createForm();
  }

  void _createForm() {
    final email = Control<String>('', Validators.required);
    final password = Control<String>(
        '', Validators.compose([Validators.required, Validators.minLength(8)]));

    this.ctrlGrp =
        FormBuilder.controlGroup({'email': email, 'password': password});
  }

  @override
  void ngOnInit() {}

  void submit() {}
}

login_component.html

<div class="container d-flex justify-content-center align-times-center">
    <div class="form-wrapper text-center">
        <h2 class="text-center">Login</h2>
        <form novalidate #f="ngForm" (ngSubmit)="submit()">
            <div ngControlGroup="ctrlGrp">
                <div class="form-group">
                    <input type="email" ngControl="email" class="form-control" id="email-input"
                           placeholder="Enter Email" formControlName="email"/>
                </div>
                <div class="form-group">
                    <input type="password" ngControl="password" class="form-control" id="password-input"
                           placeholder="Enter Password" formControlName="password"/>
                </div>
            </div>
            <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Submit</button>
        </form>
        <small><a [routerLink]="'/signup'">Need an Account?</a></small>
    </div>
</div>

pubspec.yaml

environment:
  sdk: '>=2.0.0 <3.0.0'

dependencies:
  angular: ^5.0.0
  ng_bootstrap: ^1.1.1
  sass_builder: ^2.0.0
  angular_router: ^2.0.0-alpha+19
  angular_forms: ^2.1.1

dev_dependencies:
  angular_test: ^2.0.0
  build_runner: ^1.0.0
  build_test: ^0.10.2
  build_web_compilers: ^0.4.0
  test: ^1.0.0

• How can I create a FormGroup with angular_forms 2?
• How can I bind a from group to formGroup attribute in html template?

Thanks.

解决方案

Add ngFormModel in you form tag:

<form novalidate #f="ngForm" (ngSubmit)="submit()" [ngFormModel]="ctrlGrp"></form>

这篇关于AngularDart:使用 Reactive Form Builder 创建表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！