Angular의 양식에 대한 지식을 공유하세요-JS 튜토리얼-php.cn

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

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

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

<input>

로그인 후 복사

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

<input>

로그인 후 복사

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

(event.target).value

로그인 후 복사

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

로그인 후 복사

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

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

#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의 작은 문제