Angular 2: Hinzufügen von Validatoren zu ngModelGroup

Question

Ich verwende eine ngModelGroup Direktive, um mehrere Formulareingaben zusammenzufassen. In der Dokumentation (https://angular.io/docs/ts/latest/api/forms/index/NgModelGroup-directive.html) habe ich gelesen, dass es eine validators: any[] Eigenschaft gibt.

Bedeutet das, dass ich eine benutzerdefinierte Validiererfunktion hinzufügen kann, die nur das ngModelGroup validiert? Wenn ja, wie benutze ich es?

Das wäre genial, denn ich möchte überprüfen, ob mindestens eines der Kontrollkästchen in der ngModelGroup aktiviert ist. Ich kann required nicht verwenden, denn das würde bedeuten, dass alle Checkboxen erforderlich sind. Ich kann dazu nichts in der Dokumentation finden oder suche ich am falschen Ort?

Answer 1

Dies ist vollständig mit einer ngModelGroup und einer benutzerdefinierten Richtlinie für die Validierung möglich. Schlüssel zum Verständnis, warum dies funktioniert ist, dass ngModelGroup

Erstellt und bindet eine FormGroup Instanz an ein DOM-Element.

Zunächst werden wir unsere Richtlinie bauen aus, die mit nichts ziemlich vorformulierten ist Besonderes los:

@Directive({ 
    selector: '[hasRequiredCheckboxInGroup]', 
    providers: [{provide: NG_VALIDATORS, useExisting: HasRequiredCheckBoxInGroup, multi: true}] 
}) 
export class HasRequiredCheckBoxInGroup implements Validator, OnChanges { 
    private valFn = Validators.nullValidator; 

    constructor() { 
    this.valFn = validateRequiredCheckboxInGroup(); 
    } 

    validate(control: AbstractControl): {[key: string]: any} { 
    return this.valFn(control); 
    } 
} 

Unsere Validierungsfunktion ist, wo wir unsere Schlüssel Wissen nehmen, dass ngModelGroup eine FormGroup schafft und es gelten : in unserem Modul

function validateRequiredCheckboxInGroup() : ValidatorFn { 
     return (group) => { //take the group we declare in the template as a parameter 
     let isValid = false; //default to invalid for this case 
     if(group) { 
      for(let ctrl in group.controls) { 
      if(group.controls[ctrl].value && typeof group.controls[ctrl].value === 'boolean') { // including a radio button set might blow this up, but hey, let's be careful with the directives 
       isValid = group.controls[ctrl].value; 
      } 
      } 
     } 

     if(isValid) { 
      return null; 
     } else { 
      return { checkboxRequired: true }; 
     } 
     } 
    } 

und schließlich die Richtlinie aufgenommen und erklärt haben, wir auf die Vorlage zurückkehren (muss in einer Form sein):

<form #f="ngForm"> 
     <div ngModelGroup="checkboxes" #chks="ngModelGroup" hasRequiredCheckboxInGroup> 
      <input type="checkbox" name="chk1" [(ngModel)]="checks['1']"/> 
      <input type="checkbox" name="chk2" [(ngModel)]="checks['2']"/> 
     </div> 
     <div> 
     {{chks.valid}} 
     </div> 
</form> 

Und hier ist ein Plunker mit diesem alle verfügbar zu spielen: http://plnkr.co/edit/AXWGn5XwRo60fkqGBU3V?p=preview

Answer 2

Sieht so aus, als ob jedes Steuerelement in Ihrer ModelGroup einen eigenen Validator haben sollte. Sobald dies erledigt ist, haben Sie möglicherweise Zugriff auf alle über das Validator-Array. Fügen Sie also den erforderlichen Eingängen das erforderliche Attribut hinzu.

Answer 3

Dank für die Hilfe alle raus! Ich habe Silentsods Antwort akzeptiert, weil sie sehr hilfreich war.

Meine letzte Lösung war einfach das Formular mit FormBuilder erstellen.

In meiner Komponente, das Formular zu erstellen und die Prüffunktion, um es hinzuzufügen:

ngOnInit(): void { 
    // Validator function: 
    let validateMemberList = (group: FormGroup) => { 
     let checked = Object.keys(group.controls).reduce((count, key: string) => { 
      return count + (group.controls[key].value ? 1 : 0); 
     }, 0); 

     return checked === 0 ? {'minchecked': 1} : null; 
    }; 

    this.jobForm = this.formBuilder.group({ 
     jobTitle: ['', Validators.required], 
     // more inputs... 
     members: this.formBuilder.group({}, { 
      // The 2nd argument is an object with a validator property: 
      validator: validateMemberList 
     }), 
     supportMembers: this.formBuilder.group({}, { 
      validator: validateMemberList 
     }) 
    }); 

Dann in meiner Vorlage:

<form [formGroup]="jobForm"> 
    <ul formGroupName="members"> 
     <li *ngFor="let user of teamMembers.members"> 
      <label class="e-label"> 
       <input class="e-input" type="checkbox" [formControlName]="user.$key"> 
       <user-badge [user]="user"></user-badge> 
      </label> 
     </li> 
    </ul> 
... 

Das Formular zur Anzeige von Fehlern erlaubt mir bestätigt, und deaktivieren Sie die Schaltfläche "Senden"

Vielen Dank für die Hilfe!