1

I'm starting with Angular and I'm on a project where I have to validate the inputs so they can't be left clear, every input must me completed.

It's an html and we have a .ts file.

This is an extract of the html:

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

I need to validate this factory input but when I was watching tutorials all I needed to do was to write 'required' inside the <input> and that was it but I had a <form> and every input was inside this form, and this html doesn't have a <form> and when I put one the design was horrible and I couldn't work.

4

2 回答 2

0

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

有关使用 ReactiveFormsModule 和 FormsModule 的示例，请参阅此 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 {}
于 2016-11-17T16:32:38.403 回答
0

这是一个使用必填字段的示例（在登录页面中）：

<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]
    });
  }

希望对你有帮助:)

于 2016-11-17T16:14:55.213 回答