Verwendung des FormBuilders von Angular 2 zwischen mehreren Komponenten

7

Ich versuche, FormBuilder in einer Seite zu verwenden, die ich in Ionic 2 habe.

Erstens, hier sind meine Umgebungsdetails: Das Ausführen unter Windows 10 und das Ausführen von ionic --version gibt mir 2.0.0-beta.35

Hier ist ein Teil meiner package.json -Datei:

%Vor%

Zweitens, hier sind die zwei wichtigsten beteiligten Dateien:

insight.ts

%Vor%

insight.html

%Vor%

Wie Sie sehen können, versuche ich, das FormGroup-Objekt in mehrere Komponenten zu überführen, damit ich sie verwenden kann.

Hier ist ein Beispiel, wie eine der Komponenten aussieht (minimale Version gerade):

%Vor%

Das Problem, mit dem ich gerade konfrontiert bin, ist dieser Fehler:

Was ich glaube, ist, dass der FormBuilder nach den angegebenen Namen sucht, die ich in meiner Typoskript-Datei deklariere (wie todo, imageUrl, link, usw.), aber da es in meinen anderen Komponenten ist, ist es fehlerhaft es ist nicht da.

Was könnte der Grund für diesen Fehler sein? Ich habe online gesucht und konnte keine verwandten Probleme finden.

Zu Ihrer Information: Der Grund, warum ich sie in Komponenten und nicht auf derselben Seite brauche, liegt darin, dass die Funktionalität in Zukunft für jede Eingabe anders sein wird und somit jeder Komponente eine "einheitliche Verantwortlichkeit" geben muss.

>

Vielen Dank im Voraus

    
Daniel Hair 15.08.2016, 07:00
quelle

3 Antworten

20

Für jeden anderen mit Problem

  

Die Steuerung mit einem nicht angegebenen Attribut name kann nicht gefunden werden.

Das Problem ist, dass Sie formControlName in Ihren Formulareingabeelementen vergessen haben.

formControlName="url"

Wenn Sie nach dem Korrigieren von Eingaben auf No provider for NgControl stoßen, haben Sie ein Problem mit Ionic2, das Änderungen in der Fom-Handhabung unterbricht. Es besteht die Möglichkeit, dass Sie Ihren Code reparieren können, indem Sie eine neue Formularkomponente importieren:

import { disableDeprecatedForms, provideForms } from '@angular/forms';

Aber Sie werden wahrscheinlich immer mehr Probleme bekommen. Um deinen Code wirklich zu reparieren:

  • Update auf die neueste Beta-Version
  • vereinfachen Sie Ihr Formular auf 2 einfache Eingaben
  • schreiben Sie Ihr Formular um und lassen Sie es funktionieren
  • fügen Sie die restlichen Elemente hinzu

Gutes Tutorial zu FormBuilder und Validierung Ссылка

    
dafyk 22.08.2016, 20:15
quelle
3

Als allgemeine Anmerkung in Angular 2+ habe ich festgestellt, dass die Übernahme eines konsistenten Ansatzes für die Angabe von formGroupName, formArrayName und formGroupNames viel Zeit gespart hat und was von meiner Vernunft übrig geblieben ist. Ich habe viel Zeit vor mir verloren.

Verwenden Sie entweder

%Vor%

Oder

%Vor%

Oder

%Vor%

Oder

%Vor%

Ich mischte sie ständig zu meinem großen Leid.

Beispiel aus einem aktuellen Projekt:

Fall 1: Korrekte Verwendung der Klammernotation.

%Vor%

Fall 2: Korrekte Verwendung der Nicht-Klammer-Notation.

%Vor%

Bitte beachten Sie oben die Verwendung von "{{" und "}}", um Angular dazu zu zwingen, das, was normalerweise ein literaler String-Wert wäre (wegen der Verwendung der Syntax ohne Klammern), als EL-Ausdruck zu behandeln.

Fall 3: Falsche Verwendung der Klammernotation

%Vor%

In diesem Fall wird der Wert von formArrayName, "notes", als EL-Ausdruck behandelt. Da meine Komponente kein solches Mitglied hat, wird nichts ausgewertet. Daher wird der folgende Fehler aufrechterhalten:

%Vor%

Glücklicherweise zeigt die Zeilennummer ganz unten im Stapel auf die Zeile mit dem Problem.

Fall 4: Falsche Verwendung von Nicht-Klammern-Notation

%Vor%

In diesem Fall wird der Wert von formControlName, "i", als eine literale Zeichenfolge interpretiert, aber wir wollten wirklich auf die Indexvariable "i" in der containing * ngFor-Direktive verweisen. Das Ergebnis dieses Fehlers ist:

%Vor%

Vielen Dank und Lob an alle Angular2 + Entwickler und Experten.

    
jgenoese 22.05.2017 16:50
quelle
0

Wenn Sie den FormBuilder verwenden, müssen Sie in Ihrer Vorlage das Steuerelement definieren, damit der FormBuilder das Steuerelement identifizieren kann.

Also in Ihrer Vorlage, die eine formGroup namens 'insightForm' mit einem Steuerelement 'URL':

%Vor%     
Kavo 22.07.2017 01:39
quelle