Partager quelques connaissances sur les formulaires en Angular

Cet article partagera avec vous quelques points de connaissances liés aux formulaires Angulaires. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Tutoriels associés recommandés : "Tutoriel vidéo AngularJS"

Cliquez sur la zone de saisie pour sélectionner tout le contenu

<input>

Cliquez sur la zone de saisie et effacez le contenu

<input>

Obtenez la valeur de la zone de saisie via des événements

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

value et ngValue

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

Expressions régulières couramment utilisées

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

À propos de 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" exporte NgModel dans une variable locale nommée en premier. NgModel mappe les propriétés de l'instance FormControl qu'il contrôle, vous permettant de vérifier l'état du contrôle dans le modèle, tel que valide et sale
• Lors de l'utilisation de la balise ngModel avec <input>, le système automatiquement Cette balise crée un objet appelé FormControl et l'ajoute automatiquement à FormGroup. Le FormControl dans FomGroup est identifié par l'attribut <input> sur la balise name, l'attribut name doit donc être ajouté.

Nouveau type d'entrée en 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 {
  }
}

La différence entre l'événement keyup et l'événement d'entrée

Le front-end effectue une vérification de répétabilité si l'événement keyup est utilisé pour. jugement, Si vous entrez des données existantes et cliquez sur la souris en même temps, le contrôle de répétabilité sera invalide.

Petit problème avec ngif

• ngif contrôle si le contenu d'entrée apparaît. Il n'y a aucun moyen d'utiliser #binding pour vérifier la validité, mais vous pouvez utiliser caché pour obtenir des fonctions similaires<.>

501

Si le backend ne renvoie pas de valeur au frontend, celui-ci signalera une erreur 501

Pour plus de connaissances sur la programmation, veuillez visiter :

Cours vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!