2017-08-29 1 views
0

Ich habe ein Formular erstellt, mit dem der Benutzer zusätzliche Texteingaben hinzufügen kann, indem er auf eine Schaltfläche klickt. Die FormControl s hinter diesen Eingängen sind in einem FormArray innerhalb eines FormGroup gespeichert.Angular2 Reaktive Formulare, FormControl-Standardwert im ursprünglichen Zustand

Ich möchte einen Standardwert für diese Eingaben angeben, der übergeben wird, wenn sie unberücksichtigt bleiben. Wenn der Benutzer den Wert der Eingabe ändert, der ihn in "dreckig" ändert, möchte ich nicht, dass der Standardwert übermittelt oder angezeigt wird.

Momentan zeige ich die Eingaben wie folgt an, da das Platzhalterattribut genau das tut, was ich will und den Standardnamen anzeigt, nur wenn die Eingabe nicht geändert wurde.

<div 
    formArrayName="names" 
    *ngFor="let server of names.controls; let i = index; trackBy:trackByFn"> 
     <span>{{ i + 1 }}</span> 
     <input 
     type="text" 
     formControlName="{{i}}" 
     placeholder="{{defaultName}}"> 

</div> 

die Namen Zur Validierung ich die folgende Validierungsfunktion erstellt haben:

export function validateServerName(form: FormGroup): ValidationErrors | null { 
    const names: string[] = form.value[CREATE_FORM_KEY_NAMES]; 

    for (const name of names) { 
     if (name.trim() === '') { 
      return { 
       invalidName: true 
      }; 
     } 
    } 

    return null; 
} 

hier Problem Ich habe herauszufinden, ob das Element verschmutzt oder unberührten ist, als form.value[key] nur ein String-Array zurückgibt, nicht ein Array der FormControls.

Ich suche nach einem einfacheren Weg zu tun, was ich versuche zu erreichen, oder nach einer Möglichkeit, die Form richtig zu validieren.

+1

Sie verwenden können, 'form.get ('control')' –

+0

Hat verwendet man Formbuilder? –

+0

Nein @RIYAJKHAN, aufbauend auf älterem Code, der erstellt wurde, als Form Builder noch nicht existierte – Marv

Antwort

1

können Sie den Steuerstatus überprüfen

mit

wenn sie wahr berührt ist dann seine schmutzigen

this.form.get('controlname').touched 

und für unberührte können Sie überprüfen, wie

this.form.get('controlname').pristine 

UPDATE

Für das Form-Array wird es etwas sein ng wie

let val = this.user.get('<FormArray>') as FormArray; 
    console.log(val.at(index)); 

Sie jetzt pristine und touched auf diese Variable verwenden können

+0

Ich muss auf ein Steuerelement innerhalb eines 'FormArray' zugreifen, Ihre Antwort half mir, die Lösung zu bekommen, aber Sie möchten sie vielleicht aktualisieren Der Kontext stimmt, wenn ich deine Antwort akzeptiere. – Marv

+1

@Marv aktualisiert bitte, das war der Punkt, den ich fühlte –

Verwandte Themen