Eine kurze Analyse responsiver Formulare in Angular
青灯夜游
Freigeben： 2022-04-25 10:26:40
nach vorne
3309 Leute haben es durchsucht
In diesem Artikel geht es um das responsive Formular in Angular und ich hoffe, dass es für alle hilfreich ist, die einfache Methode zur Formularimplementierung vorzustellen.
Aufgrund des kürzlich erfolgten Upgrades des Unternehmens-Frameworks wurde die ursprüngliche Methode der manuellen Formularprüfung aufgegeben und alle Formulare auf responsive umgestellt. Da ich sie noch nie zuvor verwendet hatte, dachte ich zunächst, ich wäre der Einzige, der dies tut Nachdem ich die Gruppe verstanden hatte, stellte ich fest, dass die meisten meiner anderen Kollegen nicht sehr vertraut damit waren Ich musste einige Fallstricke überwinden und habe natürlich auch einige Zeit mit dem Lernen verbracht. Für diejenigen, die damit vertraut sind, ist es zwar sehr einfach, aber es ist dennoch eine Art Verfeinerung, den Lernprozess zusammenzufassen und zusammenzufassen als Methoden zur Lösung der Probleme. Hier geht es eher darum, Theorie mit tatsächlichen Geschäftsanforderungen zu verbinden, anstatt blind API-Einführungen in Form offizieller Dokumente zu schreiben. In diesem Fall handelt es sich um Studiennotizen und nicht um eine Zusammenfassung.
Warum führen wir hauptsächlich responsive Formulare ein? Weil reaktive Formulare direkten, expliziten Zugriff auf das zugrunde liegende
Form Object Model
bieten. Sie sind robuster als vorlagengesteuerte Formulare: Sie sind erweiterbarer, wiederverwendbar und testbarer. Es ist für komplexere Formen geeignet. Das Wichtigste ist, dass ich nicht weiß, wie man andere Dinge macht. [Verwandte Tutorial-Empfehlungen: „angular Tutorial“]1. Grundkonzepte responsiver Formulare
1.FormControl, FormArray, FormGroup
1.FormControl
: Wird verwendet, um den Wert eines einzelnen Formulars zu verfolgen Formularsteuerung und Validierungsstatus, z. B. eine Feldbindung
//初始化一个栏位的值为测试名字，并且不可用
const Name:FormControl = new FormControl({value:'测试名字', disabled: true });
Nach dem Login kopieren
2.FormArray: Wird verwendet, um den Wert und Status eines Formularsteuerungsarrays zu verfolgen, z. B. mehrere Felder zusammen, häufig verwendete Tabellen oder eingebettete Tabellen im Formular
//定义表单对象的属性为aliases的FormArray
this.validateForm = this.fb.group({aliases: this.fb.array([]),});
//获取FormArray
get aliases() {return this.validateForm.get('aliases') as FormArray;}
//给FormArray 添加item
this.aliases.push(
this.fb.group({Id: 0,Name: [null],})
);
Nach dem Login kopieren
3 .FormGroup: Wird verwendet, um den Wert und den Validierungsstatus eines einzelnen Formularsteuerelements zu verfolgen. Es kann ein einzelnes oder mehrere FormControl- und FormArray-Elemente enthalten. Im Allgemeinen entspricht ein Formular einer FormGroup-Instanz und jedes Feld des Formulars entspricht einem FormControl und FormArray können sich natürlich gegenseitig verschachteln, beispielsweise kann FormArray FormGroup verschachteln, seine Flexibilität ist so.
validateForm = new FormGroup({Name: new FormControl({value:'测试名字', disabled: true }),});
validateForm = this.fb.group({});
Nach dem Login kopieren
4.FormBuilder: Es handelt sich um einen injizierbaren Dienstanbieter. Das manuelle Erstellen mehrerer Formularsteuerelemente ist sehr mühsam. Der FormBuilder-Dienst bietet einige praktische Methoden zum Generieren von Formularsteuerelementen und dann FormControl generieren und die Gruppenmethode von FormBuilder verwenden, um wiederholten Code zu reduzieren: Es hilft, Formulare einfach zu generieren
2. Um dies sicherzustellen, wird die Formularvalidierung verwendet die Eingaben des Nutzers vollständig und richtig sind. So fügen Sie einem Formularsteuerelement einen einzelnen Validator hinzu und zeigen den Gesamtstatus des Formulars an. Normalerweise gibt der Validator null zurück, um anzugeben, dass alle Validierungen erfolgreich waren.
1.Synchroner Validator: Die synchrone Validatorfunktion akzeptiert eine Kontrollinstanz und gibt dann eine Reihe von Validierungsfehlern oder zurück, die als zweiter Parameter beim Instanziieren des FormControl
validateForm!: FormGroup;
//手动创建
validateForm = new FormGroup({
Name: new FormControl('测试名字'),
});
//FormBuilder表单构建器
validateForm = this.fb.group({
Name:[ { value:'测试名字',disabled:true}],
});
Nach dem Login kopieren
//formControlName的值必须和ts代码中FormControl 的实例一致
<input type="text" id="name" class="form-control" formControlName="name" required>
//判断对应的FormControl 是否没通过校验 而有错误信息
<div *ngIf="name.errors?.['required']">
Name is required.
</div>
Nach dem Login kopieren
2.Asynchroner Validator
übergeben werden können : Die asynchrone Funktion akzeptiert eine Kontrollinstanz und gibt ein Promise oder Observable zurück, nachdem alle synchronen Validatoren bestanden haben. Sie können es als dritten Parameter übergeben, wenn Sie das FormControl instanziieren Validator
: Um beispielsweise einige Längen zu überprüfen, die nicht leer sein dürfen, können Sie die bereitgestellte Validator-Klasse verwenden, um dies zu erreichen.
4.Benutzerdefinierter Validatornull: Der im System bereitgestellte Validator kann bestehende Anforderungen nicht erfüllen Benutzerdefinierter Validator, um eine personalisierte Überprüfung durchzuführen. Der benutzerdefinierte Validator muss den Typ ValidationErrors zurückgeben oder leer sein
3. Grundlegende Methoden und Attribute von Formularen und Elementen
Methode: Wert des Steuerelements FormControl , es müssen jedoch alle Eigenschaften von FormGroup zugewiesen werden Bei gemeinsamer Verwendung kann kein einzelner Wert zugewiesen werden und wird häufig zum Ändern von Lastzuweisungen verwendet.
patchValue()
Mit patchValue können Sie auch den Wert von FormControl nach Bedarf festlegen, ohne ihn vollständig festzulegen.
reset ()
Wird in FormControl verwendet, um alle Zustände des aktuellen Steuerelements zurückzusetzen. Wird in FormGroup verwendet, um den Inhalt im Formularobjekt zurückzusetzen. Wenn das Steuerelement beispielsweise auf deaktiviert gesetzt ist, wird control.reset({ Wert: 'Drew', deaktiviert: true });
markAsPristine()
Diese Methode wird hauptsächlich verwendet, wenn das Formular zurückgesetzt wird true
markAsDirty()
Es dient dazu, den Formular-FormControl-Steuerwert als geändert zu markieren. Zu diesem Zeitpunkt ist sein Status „Dirty“ wahr und Validierungsstatus usw.
setValidators()
Legen Sie Validatoren für das FormControl-Steuerelement fest, verwenden Sie das Array „setValidators([v1,v2,v3])“
disable()
Legen Sie fest, dass das FormControl-Steuerelement nicht verfügbar ist. Beachten Sie, dass der entsprechende Wert des regulären Werts getValue() des Formulars leer ist. Sie können getRawValue() verwenden, um den ursprünglichen Wert abzurufen Objekt, um den Wert des entsprechenden FormControl abzurufen.
enable()
, um das FormControl-Steuerelement „Enable“ festzulegen
Eigenschaft
Anleitung zur Verwendung
touched
Wenn der touched-Wert des FormControl-Steuerelements wahr ist, bedeutet dies, dass das Steuerelement den Fokus erhalten hat und umgekehrt
untouched
Wenn untouched wahr ist , bedeutet dies, dass das Steuerelement nicht den Fokus erlangt hat, und umgekehrt
dirty
um anzuzeigen, dass das Formularelement vom Benutzer bedient wurde. Sie können die Methode markAsDirty verwenden, um es auf true zu setzen
status, um den Status im FormControl-Steuerelement abzurufen
Fehler
Erhalten Sie die Fehlerinformationen der aktuellen Steuerung
Das obige ist der detaillierte Inhalt vonEine kurze Analyse responsiver Formulare in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
