was ist der richtige Weg, um dynamisch markieren Sie ein Feld als erforderlich mit Hilfe der Winkel-2 Formulare?

Verwendung von Winkel-2 (2.0.0), was ist der empfohlene Weg, um dynamisch markieren Sie ein Feld als erforderlich, mit Eckige Formen?

In all Ihren Beispielen, die das required-Attribut wird nur Hinzugefügt, wie:

<input type="text" class="form-control" id="name" required>

Was ist, wenn das Modell, das ich bin die Bindung an eine IsRequired Eigenschaft, wird true/false?

Wenn ich so etwas wie:

<input [(ngModel)]="field.Value" type="text" value="{{field.Value}}" [attr.required]="field.IsRequired"/>

Macht, dass auf der Seite wie (beachten Sie die ="true"):

<input type="text" required="true" />

Für einige Grund -, Winkel scheint nicht zu erkennen, das Attribut, wenn es einen tatsächlichen Wert (="true") also wenn dieses Feld leer ist, ist mein Formular selbst, immer noch gültig ist:

<form class="ng-untouched ng-pristine ng-valid">

So scheint es, dass ich verwenden muss required und nicht required="true", aber wie kann ich das Attribut dynamisch?

Was auch nicht funktioniert:

<input type="text" {{ getRequiredAttr(field) }} />

Dachte, ich könnte in der Lage sein, um eine Funktion zurückgibt, die mein string "required" auf der Grundlage des Feldes, das gibt nur Template-Fehler.

Gibt es eine Möglichkeit, dies zu erreichen und Rendern nur required für mein Attribut? Oder ein Weg, um Winkel-erkennen Sie dieses Attribut, wenn es einen Wert von true/false?

FWIW - ich habe festgestellt, dass ich verwenden können *ngIf zu schreiben, zwei nahezu identische <input type='text' /> steuert, basierend auf meinen IsRequired Eigenschaft und fest mit der required Attribut, aber das scheint ziemlich hacky. Hoffe, es gibt einen besseren Weg!

InformationsquelleAutor lhan | 2016-10-17
  1. 3

    Den Grundformen Zeug ist großartig für einfache Formen, aber wenn Sie mehr Kontrolle benötigen wie das, was Sie hier haben, das ist, wenn Sie brauchen, um mit der weiterentwickelten form Zeug. Was das Aussehen würde in deinem Fall wäre so etwas wie dieses.

    @Component({
  selector: 'something',
  template: `
  <form #myForm="ngForm">
    <input [(ngModel)]="field.Value" [formContol]="myFieldControl" type="text" [value]="field.Value">
  </form>
  `
})
export class MyComponent{
  public field: any = {Value: 'hello', isRequired: false};
  public myFieldControl: FormControl = new FormControl('', [this.dynamicRequiredValidator.bind(this)]);

  public dynamicRequiredValidator(control: FormControl):{[key: string]: boolean}{
    if(field.IsRequired && !control.value){
      return {required: true};
    }
    return {};
  }
}

    Hinweis: Sie werden wahrscheinlich brauchen, um zu importieren die ReactiveFormsModule in Ihre @NgModule. Das kommt von @angular/forms als gut.

    Gibt es auch eine andere Möglichkeit können Sie dies mit einer Richtlinie angezeigt hier.

    • Interessant - ich werde ihm eine Chance geben. Danke!
    • Ok, ja es funktioniert perfekt. Nochmals vielen Dank!
    • Ich denke, es ist nicht ganz da. Meine <form> zeigt noch ng-valid obwohl mein Feld ist jetzt richtig ng-invalid. Muss ich etwas besonderes tun, um das Formular korrekt aktualisiert zu erhalten? Ich nehme an, dies ist, weil die required Attribut ist nicht wirklich vorhanden sind mit deiner Lösung?
    • Bei der Verwendung von FormControl das Attribut wird nicht angezeigt. Die Prüfungen sind bestanden in der FormControl als das zweite argument ist ein array von Prüfungen. Das ist das komische [this.dynamicRequiredValidator.bin(this)] Teil. Sie sind auch gehen zu wollen, stellen Sie sicher, dass Sie mit (ngSubmit) auf Ihre <form> zum auslösen der Validierung. Zum Debuggen würde ich empfehlen, ein paar console.log() im dynamicRequiredValidator um sicherzustellen, dass es ausgeführt wird, und dass es die Rückkehr das richtige Ergebnis
    • Oh, warten Sie, und Sie redeten über das Formular selbst... hmm... Haben Sie einen Blick auf FormBuilder oder FormGroup
    • Das ist, was ich bin auf der Suche in nun. Ich wollte nicht angeben, dass Sie gut genug in meiner Frage. Ihre Antwort steht noch als Arbeit für das, was ich gefragt habe 🙂

    InformationsquelleAutor SnareChops
  2. 9

    Warum müssen Sie machen es so kompliziert, wenn Sie können einfach tun dies,

    [required]="isFieldRequired() ? 'required' : null"
    • Dies ist wahrscheinlich gut für einfache Szenarien, ja. Letztendlich aber für komplexere Validierungen (mit eigenen Prüfungen, etc.), Ich würde lieber zu lassen, reaktive Formen verarbeiten, so weit wie möglich.
    InformationsquelleAutor Edison D'souza
Schreibe einen Kommentar