Share some knowledge about forms in Angular

This article will share with you some knowledge points related to Angular forms. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related tutorial recommendations: "angularjs video tutorial"

Click on the input box to select all content

<input>

Click the input box and clear the content

<input>

Get the value of the input box through events

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

value and ngValue

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

Commonly used regular expressions

取值范围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+)?))$

About 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" Export NgModel into a local variable named first. NgModel maps the properties of the FormControl instance it controls, allowing you to check the status of the control in the template, such as valid and dirty
• Use ngModel&lt;input&gt; tag, the system will automatically create an object called <code>FormControl for this tag, and automatically add it to FormGroup. The FormControl is identified in FomGroup by the name attribute on the <input> tag, so ## must be added. #name attribute.

New input type in 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 {
  }
}

The difference between keyup event and input event

The front end performs repeatability verification. If the keyup event is used for judgment, If you enter existing data and click the mouse at the same time, the repeatability check will be invalid.

Small problems with ngif

ngif controls whether the input content appears. There is no way to use #binding to verify the validity, but you can use hidden to achieve similar functions

501

If the backend does not return a value to the frontend, the frontend will report a 501 error

For more programming-related knowledge, please visit:

Programming Video Course! !

The above is the detailed content of Share some knowledge about forms in Angular. For more information, please follow other related articles on the PHP Chinese website!