Angular7-양식

이 장에서는 Angular 7에서 양식이 어떻게 사용되는지 살펴 보겠습니다. 양식을 사용하는 두 가지 방법에 대해 설명합니다.

템플릿 기반 양식
모델 기반 양식

템플릿 기반 양식

템플릿 기반 양식을 사용하면 대부분의 작업이 템플릿에서 수행됩니다. 모델 기반 양식을 사용하면 대부분의 작업이 구성 요소 클래스에서 수행됩니다.

이제 템플릿 기반 양식 작업을 고려해 보겠습니다. 간단한 로그인 양식을 만들고 양식에 이메일 ID, 비밀번호 및 제출 버튼을 추가합니다. 시작하려면 다음과 같이 app.module.ts에서 수행되는 @ angular / forms에서 FormsModule로 가져와야합니다.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop'; 
import { FormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      FormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

그래서 app.module.ts, 우리는 수입했습니다 FormsModule 강조 표시된 코드에 표시된 것처럼 imports 배열에 동일한 내용이 추가됩니다.

이제 양식을 app.component.html 파일.

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)"> 
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel> 
   <br/> 
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel> 
   <br/> 
   <input type = "submit" value = "submit"> 
</form>

이메일 ID, 비밀번호 및 제출 버튼이있는 입력 태그가있는 간단한 양식을 만들었습니다. 유형, 이름 및 자리 표시자를 할당했습니다.

템플릿 기반 양식에서는 다음을 추가하여 모델 양식 컨트롤을 만들어야합니다. ngModel 지침 및 name속성. 따라서 Angular가 양식에서 데이터에 액세스하기를 원할 때마다 위와 같이 해당 태그에 ngModel을 추가하십시오. 이제 emailid와 passwd를 읽어야한다면 ngModel을 추가해야합니다.

보시면 ngForm을 #userlogin. 그만큼ngForm우리가 만든 양식 템플릿에 지시문을 추가해야합니다. 우리는 또한 기능을 추가했습니다onClickSubmit 할당 userlogin.value 그것에.

이제 함수를 app.component.ts 양식에 입력 된 값을 가져옵니다.

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css']
})
export class AppComponent { 
   title = 'Angular 7 Project!'; 
   constructor(private myservice: MyserviceService) { } 
   ngOnInit() { } 
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid); 
   }
}

위의 app.component.ts 파일에서 onClickSubmit 함수를 정의했습니다. 양식 제출 버튼을 클릭하면 위의 기능에 대한 컨트롤이 제공됩니다.

로그인 양식에 대한 CSS가 추가되었습니다. app.component.css −

input[type = text], input[type = password] { 
   width: 40%; 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
} 
input[type = submit] { 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
}

이것이 브라우저가 표시되는 방식입니다.

양식은 아래와 같습니다. 여기에 데이터를 입력하고 제출 기능에서 이메일 ID가 아래와 같이 경고됩니다.

모델 기반 양식

모델 기반 양식에서는 @ angular / forms에서 ReactiveFormsModule을 가져 와서 가져 오기 배열에서 동일한 것을 사용해야합니다.

들어가는 변화가 있습니다 app.module.ts.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      ReactiveFormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

에 app.component.ts, 모델 기반 양식에 대한 몇 가지 모듈을 가져와야합니다. 예를 들면import { FormGroup, FormControl } '에서@angular/forms'.

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service'; 
import { FormGroup, FormControl } from '@angular/forms';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent {
   title = 'Angular 7 Project!'; 
   emailid; 
   formdata;
   constructor(private myservice: MyserviceService) { }  
   ngOnInit() { 
      this.formdata = new FormGroup({ 
         emailid: new FormControl("[email protected]"),
         passwd: new FormControl("abcd1234") 
      }); 
   } 
   onClickSubmit(data) {this.emailid = data.emailid;}
}

변수 폼 데이터는 클래스 시작시 초기화되며 위와 같이 FormGroup으로 초기화됩니다. emailid 및 passwd 변수는 양식에 표시되는 기본값으로 초기화됩니다. 원하는 경우 비워 둘 수 있습니다.

양식 UI에서 값이 표시되는 방식입니다.

formdata를 사용하여 양식 값을 초기화했습니다. 양식 UI에서 동일하게 사용해야합니다.app.component.html.

<div> 
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" > 
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName = "emailid"> 
      <br/> 
      
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd"> 
      <br/>
      
      <input type = "submit" class = "forsubmit" value = "Log In"> 
   </form>
</div> 
<p> Email entered is : {{emailid}} </p>

.html 파일에서 양식에 대괄호 안에 formGroup을 사용했습니다. 예 : [formGroup] =”formdata”. 제출시 함수가 호출됩니다.onClickSubmit 어떤 formdata.value 전달됩니다.

입력 태그 formControlName사용. 우리가 사용한 값이 주어집니다.app.component.ts 파일.

제출을 클릭하면 컨트롤이 함수로 전달됩니다. onClickSubmit에 정의되어 있습니다. app.component.ts 파일.

로그인을 클릭하면 위의 스크린 샷과 같이 값이 표시됩니다.

양식 유효성 검사

이제 모델 기반 양식을 사용한 양식 유효성 검사에 대해 설명하겠습니다. 기본 제공 양식 유효성 검사를 사용하거나 사용자 지정 유효성 검사 방법을 사용할 수도 있습니다. 양식에서 두 가지 접근 방식을 모두 사용합니다. 이전 섹션 중 하나에서 만든 것과 동일한 예제를 계속 진행합니다. Angular 7에서는Validators ...에서 @angular/forms 아래와 같이-

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

Angular에는 다음과 같은 기본 제공 유효성 검사기가 있습니다. mandatory field, minlength, maxlength, 및 pattern. 이들은 Validators 모듈을 사용하여 액세스 할 수 있습니다.

특정 필드가 필수 인 경우 Angular에 알리는 데 필요한 유효성 검사기 또는 유효성 검사기 배열 만 추가 할 수 있습니다. 이제 입력 텍스트 상자 중 하나, 즉 이메일 ID에서 동일한 작업을 시도해 보겠습니다. 이메일 ID의 경우 다음 유효성 검사 매개 변수를 추가했습니다.

Required
패턴 매칭

이것이 코드가 app.component.ts.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

에 Validators.compose, 입력 필드에 유효성을 검사하려는 항목의 목록을 추가 할 수 있습니다. 지금 우리는required 그리고 pattern matching 유효한 이메일 만 가져 오는 매개 변수.

에서 app.component.html, 양식 입력이 유효하지 않은 경우 제출 단추가 비활성화됩니다. 이것은 다음과 같이 수행됩니다-

<div> 
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)"> 
      <input type = "text" class = "fortextbox" name = "emailid" 
         placeholder = "emailid" formControlName = "emailid"> 
      <br/> 
    
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/> 
      
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit" 
         value = "Log In"> 
   </form> 
</div>
<p> Email entered is : {{emailid}} </p>

제출 버튼의 경우 대괄호에 disabled를 추가했으며 다음 값이 제공됩니다.

!formdata.valid.

따라서 formdata.valid가 유효하지 않은 경우 버튼은 비활성화 된 상태로 유지되고 사용자는이를 제출할 수 없습니다.

이것이 브라우저에서 어떻게 작동하는지 봅시다.

위의 경우 입력 한 이메일 ID가 유효하지 않으므로 로그인 버튼이 비활성화됩니다. 이제 유효한 이메일 ID를 입력하고 차이점을 살펴 보겠습니다.

이제 입력 한 이메일 ID가 유효합니다. 따라서 로그인 버튼이 활성화되고 사용자가 제출할 수 있음을 알 수 있습니다. 이를 통해 입력 한 이메일 아이디가 하단에 표시됩니다.

이제 동일한 형식으로 사용자 지정 유효성 검사를 시도해 보겠습니다. 사용자 지정 유효성 검사를 위해 자체 사용자 지정 함수를 정의하고 필요한 세부 정보를 추가 할 수 있습니다. 이제 동일한 예를 살펴 보겠습니다.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

위의 예에서는 함수를 만들었습니다. passwordvalidation formcontrol의 이전 섹션에서도 동일하게 사용됩니다. passwd: new FormControl("", this.passwordvalidation).

우리가 만든 함수에서 입력 한 문자의 길이가 적절한 지 확인합니다. 문자가 5 개 미만이면 위와 같이 passwd true를 반환합니다.-return { "passwd": true} ;. 문자가 5 자 이상이면 유효한 것으로 간주하고 로그인이 활성화됩니다.

이제 이것이 브라우저에 어떻게 표시되는지 봅시다.