Angular2で入力する必要がありません

Question

私はAngularから始めています。私は入力を検証する必要があるため、入力を完了する必要があります。

これはhtmlですが、.tsファイルがあります。

これは、HTMLの抽出物である：私は私が行うために必要なすべてが<input>の内側に「必要な」書くことでしたし、それはそれだったのチュートリアルを見ていたとき

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

私はこの工場の入力を検証する必要がありますが、しかし、私は<form>を持っていて、すべての入力はこのフォームの中にあり、このhtmlには<form>がありません。私が1つ入れると恐ろしいデザインになり、動作できませんでした。ここで

Answer 1

が必要なフィールド（ログインページ内）を使用した例です。

1）いくつかのモジュールをインポートします：login.component.tsで

<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> 

、uがいくつかの変更を行う必要があります

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 {}