Geben Sie etwas Wissen über Formulare in Angular weiter

In diesem Artikel werden einige Wissenspunkte zum Thema „Winkelform“ mit Ihnen geteilt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Empfohlene verwandte Tutorials: „

AngularJS-Video-Tutorial

“Klicken Sie auf das Eingabefeld, um den gesamten Inhalt auszuwählen.

<input>

Klicken Sie auf das Eingabefeld, um den Inhalt zu löschen Ereignisse

<input>

value und ngValue

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

Häufig verwendete reguläre Ausdrücke

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

Über ngForm

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

#first="ngModel" Exportieren Sie NgModel in eine lokale Variable namens first. NgModel ordnet die Eigenschaften der FormControl-Instanz zu, die es steuert, sodass Sie den Status des Steuerelements in der Vorlage überprüfen können, z. B. gültig und fehlerhaft.

Verwenden Sie &lt;input&gt; mit <code>ngModel code>-Tag erstellt das System automatisch ein Objekt namens FormControl für dieses Tag und fügt es automatisch zu FormGroup hinzu. Und FormControl wird in FomGroup mithilfe des Attributs name im Tag <input> identifiziert, also Der name muss hinzugefügt werden.

• #first="ngModel" 把 NgModel 导出成了一个名叫 first 的局部变量。NgModel 把自己控制的 FormControl 实例的属性映射出去，让你能在模板中检查控件的状态，比如 valid 和 dirty
• 使用带有ngModel的<input>标签时，系统会自动为这个标签创建一个叫做FormControl的对象，并且会自动把它添加到FormGroup中。而FormControl在FomGroup中是用<input>标签上的name属性来做标识的,所以必须添加nameNeuer Eingabetyp in HTML5

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   } }Der Unterschied zwischen Keyup-Ereignis und Eingabeereignis

Das Frontend führt eine Wiederholbarkeitsüberprüfung durch. Wenn Sie das Keyup-Ereignis zur Beurteilung verwenden, geben Sie die vorhandenen Daten ein und klicken Sie gleichzeitig mit der Maus , wird die Wiederholbarkeitsüberprüfung ungültig.

Kleines Problem mit ngif

ngif steuert, ob der Eingabeinhalt angezeigt wird. Es gibt keine Möglichkeit, #binding zu verwenden, um die Gültigkeit zu überprüfen, aber Sie können Hidden verwenden, um ähnliche Funktionen zu erreichen

• 501

Wenn das Backend dies nicht tut Geben Sie einen Wert an das Frontend zurück. Das Frontend meldet einen 501-Fehler

Weitere Kenntnisse zum Programmieren finden Sie unter:

Programmiervideokurs

! !

Das obige ist der detaillierte Inhalt vonGeben Sie etwas Wissen über Formulare in Angular weiter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!