Angular의 양식에 대한 지식을 공유하세요

이 글은 Angularform 관련 지식 포인트를 여러분과 공유할 것입니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천 관련 튜토리얼: "angularjs video tutorial"

모든 콘텐츠를 선택하려면 입력 상자를 클릭하세요

<input>

콘텐츠를 지우려면 입력 상자를 클릭하세요

<input>

다음을 통해 입력 상자의 값을 가져옵니다. events

(<htmlinputelement>event.target).value</htmlinputelement>

value 및 ngValue

[value]="..." 仅支持字符串值
[ngValue]="..." 支持任何类型

일반적으로 사용되는 정규식

取值范围20-360：^(([2-9][0-9])|([1-2][0-9][0-9])|([3][0-5][0-9]))$|^[3][6][0]$
整数：^-?d+$
浮点数:^(-?d+)(.d+)?$
正浮点数：^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$
负浮点数 ^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$
非负浮点数（正浮点数 + 0）：^d+(.d+)?$
非正浮点数（负浮点数 + 0） ^((-d+(.d+)?)|(0+(.0+)?))$

ngForm

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    

      <input>       <input>       Submit     

    

First name value: {{ first.value }}

    

First name valid: {{ first.valid }}

    

Form value: {{ f.value | json }}

    

Form valid: {{ f.valid }}

  `, }) export class SimpleFormComp {   onSubmit(f: NgForm) {     console.log(f.value);  // { first: '', last: '' }     console.log(f.valid);  // false   } }

• #first="ngModel" NgModel을 first라는 로컬 변수로 내보냅니다. NgModel은 자신이 제어하는 ​​FormControl 인스턴스의 속성을 매핑하여 템플릿에서 컨트롤의 상태(예: 유효한지, 더러운지 확인할 수 있음)를 확인할 수 있습니다.#first="ngModel" 把 NgModel 导出成了一个名叫 first 的局部变量。NgModel 把自己控制的 FormControl 实例的属性映射出去，让你能在模板中检查控件的状态，比如 valid 和 dirty
• 使用带有ngModel的<input>标签时，系统会自动为这个标签创建一个叫做FormControl的对象，并且会自动把它添加到FormGroup中。而FormControl在FomGroup中是用<input>标签上的name属性来做标识的,所以必须添加name
ngModel와 함께 <input> 사용 code> 태그를 사용하면 시스템이 이 태그에 대해 FormControl이라는 개체를 자동으로 생성하고 FormGroup에 자동으로 추가합니다. 그리고 FormControl은 <input> 태그의 name 속성을 ​​사용하여 FomGroup에서 식별됩니다. >name 속성을 ​​추가해야 합니다.

HTML5의 새로운 입력 유형

import { Component, OnInit } from '@angular/core';
import {Data} from "popper.js";
@Component({
  selector: 'app-test-data',
 template: `
 
 test-data works! 
 <input>{{date}}

 <input>{{month}}

 <input>{{week}}

 <input>{{time}}

 <input>{{datetimeLocal}}
 <input> 
  `,
 styles: [
  ]
})
export class TestDataComponent implements OnInit {
 date:string;
 month:string;
 week:string;
 time:string;
 datetimeLocal:string;
 constructor() { }
  ngOnInit(): void {
  }
}

keyup 이벤트와 입력 이벤트의 차이점

프런트엔드는 반복성 검증을 수행합니다. keyup 이벤트를 판단에 사용하는 경우 기존 데이터를 입력하고 동시에 마우스를 클릭합니다. , 반복성 검증이 무효화됩니다.

ngif의 작은 문제

• ngif는 입력 콘텐츠가 표시되는지 여부를 제어합니다. #bind를 사용하여 유효성을 확인할 수는 없지만 숨겨진 기능을 사용하여 유사한 기능을 얻을 수 있습니다.

501

백엔드가 표시되지 않는 경우 프런트엔드에 값을 반환하면 프런트엔드는 501 오류를 보고합니다

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오 코스

를 방문하세요! ! 🎜

위 내용은 Angular의 양식에 대한 지식을 공유하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!