AngularDart: создание формы с помощью Reactive Form Builder - PullRequest
Новая
       51

AngularDart: создание формы с помощью Reactive Form Builder

0 голосов
/ 03 марта 2019

Я пытаюсь создать с использованием AngularDart 5, angular_forms 2.API кажется очень отличным от angular_forms 1, и я не могу понять, как создать FormGroup, используя FormBuilder и ControlGroup.Ниже приведен мой код.

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
  • Как создать FormGroup с angular_forms 2?
  • Как связать атрибут из группы с атрибутом formGroup в шаблоне HTML?

Ответы [ 2 ]

0 голосов
/ 04 марта 2019

Добавьте ngFormModel в свой тег формы: 

<form novalidate #f="ngForm" (ngSubmit)="submit()" [ngFormModel]="ctrlGrp"></form>
0 голосов
/ 04 марта 2019

Мне удалось найти ответ с помощью @ ebelair.

Мне не хватало части [ngFormModel]="loginForm".Ниже приведен рабочий код.

login_component.dart 

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

  LoginComponent() {
    this._createForm();
  }

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

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

  @override
  void ngOnInit() {}

  void submit() {
    print(this.loginForm.value['email']);
    print(this.loginForm.value['password']);
  }
}

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 [ngFormModel]="loginForm" (ngSubmit)="submit()">
            <div>
                <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]="!loginForm.valid">Submit</button>
        </form>
        <small><a [routerLink]="'/signup'">Need an Account?</a></small>
    </div>
</div>

Надеюсь, что этопомогает.

...