Question

我从Angular开始，我在一个项目中，我必须验证输入，这样他们就不会被清除，我必须完成所有输入。

它是一个HTML，我们有一个.ts文件。

这是html的摘录：

<div class="form-group">
    <input  type="text"
            class="form-control"
            id="factory"
            [(ngModel)]="factory.company">
</div>

我需要验证这个工厂输入，但是当我观看教程时，我需要做的就是编写“必需”＆＃39;在<input>内部就是这样，但我有一个<form>，并且每个输入都在这个表单中，而且这个html没有<form>当我把一个设计放入太可怕了，我无法工作。

Answer 1

以下是使用必填字段的示例（在登录页面中）：

<form [formGroup]='loginForm' (submit)="login(loginForm.value)">
            <div class="col-md-6">
                <div class="login-mail">
                    <input type="text" placeholder="Email" formControlName="email" required="">
                    <i class="fa fa-envelope"></i>
                </div>
                <div class="login-mail">
                    <input type="password" placeholder="Password" formControlName="password" pattern=".{8,20}" required="">
                    <i class="fa fa-lock"></i>
                </div>
            </div>
            <div class="col-md-6 login-do">
                <label class="hvr-shutter-in-horizontal login-sub">
                    <input type="submit" value="login" >
                </label>
            </div>

            <div class="clearfix"> </div>
        </form>

login.component.ts中的

，你应该做一些改变：

1）导入一些模块：

import { FormBuilder, FormGroup, Validators}  from '@angular/forms';

2）oninit功能：

loginForm: FormGroup;
constructor(private fb : FormBuilder) {}
ngOnInit(){
    this.loginForm = this.fb.group({
      email : ["", Validators.required],
      password : ["", Validators.required]
    });
  }

希望有助于你：）

Answer 2

我认为您应该能够添加表单元素。但是，如果你不能如你所说，那么你可以将ngForm指令添加到任何元素上，以实现与表单元素相同的行为。

有关使用ReactiveFormsModule和FormsModule的示例，请参阅此plunker：

Plunker

//our root app component
import {Component, OnInit, NgModule} from '@angular/core'
import {ReactiveFormsModule, FormsModule, FormControl, Validators} from '@angular/forms'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div class="form-group">
          <label>Model Driven Form</label>
          <input  type="text"
                  class="form-control"
                  id="companyModel"
                  [formControl]="companyModel">
          <span [hidden]="companyModel.valid || companyModel.pristine">REQUIRED!</span>
      </div>

      <div class="form-group" ngForm #myForm="ngForm">
          <label>Template Driven Form</label>
          <input  type="text"
                  class="form-control"
                  name="companyTemplate"
                  ngModel
                  id="companyTemplate"
                  #companyTemplate="ngModel"
                  required>
          <span [hidden]="companyTemplate.valid || companyTemplate.pristine">REQUIRED!</span>

      </div>
    </div>
  `,
})
export class App implements OnInit {
  name:string;
  companyModel: FormControl
  constructor() {
    this.name = 'Form Validation Demo'
  }
  ngOnInit() {
    this.companyModel = new FormControl('', Validators.required)
  }
}

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

我无法通过Angular2进行输入

2 个答案: