我无法使用 Angular2 进行输入答案

【问题标题】：I can't make an input be required with Angular2我无法使用 Angular2 进行输入
【发布时间】：2016-11-17 15:16:27
【问题描述】：

我从 Angular 开始，我在一个项目中，我必须验证输入，所以它们不能被清除，每个输入都必须我完成。

这是一个 html，我们有一个 .ts 文件。

这是html的摘录：

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

我需要验证这个工厂输入，但是当我看教程时，我需要做的就是在 <input> 中写“必需”，就是这样，但我有一个 <form>，每个输入都在这个表单中，而这个 html 没有 <form>，当我放一个时，设计很糟糕，我无法工作。

【问题讨论】：

required 属性仅在表单提交时强制执行，这意味着它只能用于表单内的元素。如果您不能使用表单，您将不得不想办法进行验证。
@Lex 感谢您的回答。你知道怎么做吗？这是我第一次使用 Angular，我一直在我处理过的几个 html 页面中使用
并且没有表单我不明白。在我完成的每个示例中，我都必须将脚本与 Angular url 和我的 javascript 文件一起放置，这里 html 和 TypeScript 文件之间没有任何链接
when I put one the design was horrible and I couldn't work
@elkaco 您如何验证将取决于您的具体情况，但简单地检查处理提交的任何方法内的各种属性中的值将是一个明显的起点。
@Igor 是对的——表单是一个不可见的元素，所以除非你有特定的 CSS 选择器或者你不匹配表单标签的打开和关闭，否则它不会影响你的 HTML 的布局。

标签： javascript html angular angular2-ngmodel

【解决方案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]
    });
  }

希望对你有帮助:)

【讨论】：

【解决方案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 {}

【讨论】：