È possibile creare un validatore che può utilizzare più valori per decidere se il mio campo è valido?

ad esempio, se il metodo di contatto preferito del cliente è tramite e-mail, il campo e-mail dovrebbe essere richiesto.

Grazie.

Aggiornato con codice di esempio ...

    import {Component, View} from 'angular2/angular2';
    import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';

    @Component({
        selector: 'customer-basic',
        viewInjector: [FormBuilder]
    })
    @View({
        templateUrl: 'app/components/customerBasic/customerBasic.html',
        directives: [formDirectives]
    })
    export class CustomerBasic {
        customerForm: ControlGroup;

        constructor(builder: FormBuilder) {
            this.customerForm = builder.group({
                firstname: [''],
                lastname: [''],
                validateZip: ['yes'],
                zipcode: ['', this.zipCodeValidator] 
                // I only want to validate using the function below if the validateZip control is set to 'yes'
            });
        }

        zipCodeValidator(control) {
            if (!control.value.match(/\d\d\d\d\d(-\d\d\d\d)?/)) {
                return { invalidZipCode: true };
            }
        }

    }

Per ribadire i metodi che altri hanno pubblicato, questo è il modo in cui ho creato FormGroupvalidatori che non coinvolgono più gruppi.

Per questo esempio, fornire semplicemente i nomi delle chiavi dei campi passworde confirmPassword.

// Example use of FormBuilder, FormGroups, and FormControls
this.registrationForm = fb.group({
  dob: ['', Validators.required],
  email: ['', Validators.compose([Validators.required,  emailValidator])],
  password: ['', Validators.required],
  confirmPassword: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required]
}, {validator: matchingPasswords('password', 'confirmPassword')})

Per Validatorsprendere i parametri, devono restituire a functioncon a FormGroupo FormControlcome parametro. In questo caso, sto convalidando un file FormGroup.

function matchingPasswords(passwordKey: string, confirmPasswordKey: string) {
  return (group: FormGroup): {[key: string]: any} => {
    let password = group.controls[passwordKey];
    let confirmPassword = group.controls[confirmPasswordKey];

    if (password.value !== confirmPassword.value) {
      return {
        mismatchedPasswords: true
      };
    }
  }
}

Tecnicamente, avrei potuto convalidare due valori qualsiasi se conoscessi le loro chiavi, ma preferisco nominare il mio Validatorscome l'errore che restituiranno. La funzione potrebbe essere modificata per accettare un terzo parametro che rappresenta il nome chiave dell'errore restituito.

Aggiornato il 6 dicembre 2016 (v2.2.4)

Esempio completo: https://embed.plnkr.co/ukwCXm/

La risposta di Dave è stata molto, molto utile. Tuttavia, una leggera modifica potrebbe aiutare alcune persone.

Nel caso in cui sia necessario aggiungere errori ai Controlcampi, è possibile mantenere la costruzione effettiva del modulo e dei validatori:

// Example use of FormBuilder, ControlGroups, and Controls
this.registrationForm= fb.group({
  dob: ['', Validators.required],
  email: ['', Validators.compose([Validators.required,  emailValidator])],
  password: ['', Validators.required],
  confirmPassword: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required]
}, {validator: matchingPasswords('password', 'confirmPassword')})

Invece di impostare un errore su ControlGroup, fallo nel campo effettivo come segue:

function matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
  return (group: ControlGroup) => {
    let passwordInput = group.controls[passwordKey];
    let passwordConfirmationInput = group.controls[passwordConfirmationKey];
    if (passwordInput.value !== passwordConfirmationInput.value) {
      return passwordConfirmationInput.setErrors({notEquivalent: true})
    }
  }
}

Quando si implementano i validatori per più campi del modulo, sarà necessario assicurarsi che i validatori vengano rivalutati quando ogni controllo del modulo viene aggiornato. La maggior parte degli esempi non fornisce una soluzione per tale scenario, ma questo è molto importante per la coerenza dei dati e il comportamento corretto.

Si prega di vedere la mia implementazione di un validatore personalizzato per Angular 2, che ne tiene conto: https://gist.github.com/slavafomin/17ded0e723a7d3216fb3d8bf845c2f30 .

Sto usando otherControl.valueChanges.subscribe()per ascoltare le modifiche in un altro controllo e thisControl.updateValueAndValidity()per attivare un altro ciclo di convalida quando viene modificato un altro controllo.

Sto copiando un codice di seguito per riferimento futuro:

altri-validator.ts match-

import {FormControl} from '@angular/forms';


export function matchOtherValidator (otherControlName: string) {

  let thisControl: FormControl;
  let otherControl: FormControl;

  return function matchOtherValidate (control: FormControl) {

    if (!control.parent) {
      return null;
    }

    // Initializing the validator.
    if (!thisControl) {
      thisControl = control;
      otherControl = control.parent.get(otherControlName) as FormControl;
      if (!otherControl) {
        throw new Error('matchOtherValidator(): other control is not found in parent group');
      }
      otherControl.valueChanges.subscribe(() => {
        thisControl.updateValueAndValidity();
      });
    }

    if (!otherControl) {
      return null;
    }

    if (otherControl.value !== thisControl.value) {
      return {
        matchOther: true
      };
    }

    return null;

  }

}

uso

Ecco come puoi usarlo con le forme reattive:

private constructForm () {
  this.form = this.formBuilder.group({
    email: ['', [
      Validators.required,
      Validators.email
    ]],
    password: ['', Validators.required],
    repeatPassword: ['', [
      Validators.required,
      matchOtherValidator('password')
    ]]
  });
}

Validatori più aggiornati possono essere trovati qui: moebius-mlm / ng-validators .

Sto usando Angular 2 RC.5 ma non sono riuscito a trovare il ControlGroup, sulla base dell'utile risposta di Dave. Ho scoperto che FormGroup funziona invece. Così ho fatto alcuni aggiornamenti minori sui codici di Dave e ho pensato di condividerli con altri.

Nel file del componente, aggiungi un'importazione per FormGroup:

import {FormGroup} from "@angular/forms";

Definisci i tuoi input nel caso in cui sia necessario accedere direttamente al controllo del modulo:

oldPassword = new FormControl("", Validators.required);
newPassword = new FormControl("", Validators.required);
newPasswordAgain = new FormControl("", Validators.required);

Nel tuo costruttore, istanzia il tuo modulo:

this.form = fb.group({
  "oldPassword": this.oldPassword,
  "newPassword": this.newPassword,
  "newPasswordAgain": this.newPasswordAgain
}, {validator: this.matchingPasswords('newPassword', 'newPasswordAgain')});

Aggiungi la funzione matchingPasswords nella tua classe:

matchingPasswords(passwordKey: string, passwordConfirmationKey: string) {
  return (group: FormGroup) => {
    let passwordInput = group.controls[passwordKey];
    let passwordConfirmationInput = group.controls[passwordConfirmationKey];
    if (passwordInput.value !== passwordConfirmationInput.value) {
      return passwordConfirmationInput.setErrors({notEquivalent: true})
    }
  }
}

Spero che questo aiuti coloro che utilizzano RC.5. Nota che non ho ancora testato su RC.6.

Ho scavato molto nella sorgente angolare ma ho trovato un modo migliore.

constructor(...) {
    this.formGroup = builder.group({
        first_name:        ['', Validators.required],
        matching_password: builder.group({
            password: ['', Validators.required],
            confirm:  ['', Validators.required]
        }, this.matchPassword)
    });

    // expose easy access to passworGroup to html
    this.passwordGroup = this.formGroup.controls.matching_password;
}

matchPassword(group): any {
    let password = group.controls.password;
    let confirm = group.controls.confirm;

    // Don't kick in until user touches both fields   
    if (password.pristine || confirm.pristine) {
      return null;
    }

    // Mark group as touched so we can add invalid class easily
    group.markAsTouched();

    if (password.value === confirm.value) {
      return null;
    }

    return {
      isValid: false
    };
}

Parte HTML per gruppo di password

<div ng-control-group="matching_password" [class.invalid]="passwordGroup.touched && !passwordGroup.valid">
    <div *ng-if="passwordGroup.touched && !passwordGroup.valid">Passwords must match.</div>
    <div class="form-field">
        <label>Password</label>
        <input type="password" ng-control="password" placeholder="Your password" />
    </div>
    <div class="form-field">
        <label>Password Confirmation</label>
        <input type="password" ng-control="confirm" placeholder="Password Confirmation" />
    </div>
</div>

Per espandere la risposta di matthewdaniel poiché non è esattamente corretta. Ecco un codice di esempio che mostra come assegnare correttamente un validatore a un file ControlGroup.

import {Component} from angular2/core
import {FormBuilder, Control, ControlGroup, Validators} from 'angular2/common'

@Component({
  selector: 'my-app',
  template: `
    <form [ngFormModel]="form">
      <label for="name">Name:</label>
      <input id="name" type="text" ngControl="name">
      <br>
      <label for="email">Email:</label>
      <input id="email" type="email" ngControl="email">
      <br>
      <div ngControlGroup="matchingPassword">
        <label for="password">Password:</label>
        <input id="password" type="password" ngControl="password">
        <br>
        <label for="confirmPassword">Confirm Password:</label>
        <input id="confirmPassword" type="password" ngControl="confirmPassword">
      </div>
    </form>
    <p>Valid?: {{form.valid}}</p>
    <pre>{{form.value | json}}</pre>
  `
})
export class App {
  form: ControlGroup
  constructor(fb: FormBuilder) {
    this.form = fb.group({
      name: ['', Validators.required],
      email: ['', Validators.required]
      matchingPassword: fb.group({
        password: ['', Validators.required],
        confirmPassword: ['', Validators.required]
      }, {validator: this.areEqual})
    });
  }

  areEqual(group: ControlGroup) {
    let val;
    let valid = true;

    for (name in group.controls) {
      if (val === undefined) {
        val = group.controls[name].value
      } else {
        if (val !== group.controls[name].value) {
          valid = false;
          break;
        }
      }
    }

    if (valid) {
      return null;
    }

    return {
      areEqual: true
    };
  }
}

Ecco un esempio funzionante: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview

Ecco un'altra opzione che sono riuscito a trovare che non dipende da un intero o da un sub ControlGroupma è legata direttamente a ciascuno Control.

Il problema che avevo era che i controlli che dipendevano l'uno dall'altro non erano gerarchicamente insieme, quindi non ero in grado di creare un file ControlGroup. Inoltre, il mio CSS era configurato in modo che ogni controllo sfruttasse le classi angolari esistenti per determinare se visualizzare lo stile degli errori, che era più complicato quando si trattava di una convalida di gruppo invece di una convalida specifica del controllo. Non è stato possibile tentare di determinare se un singolo controllo fosse valido poiché la convalida era legata al gruppo di controlli e non a ogni singolo controllo.

Nel mio caso volevo il valore di una casella di selezione per determinare se un altro campo sarebbe stato richiesto o meno.

Questo viene creato utilizzando il Form Builder sul componente. Per il modello di selezione invece di collegarlo direttamente al valore dell'oggetto richiesta, l'ho associato a funzioni get / set che mi consentiranno di gestire eventi "in caso di modifica" per il controllo. Quindi sarò in grado di impostare manualmente la convalida per un altro controllo a seconda del nuovo valore dei controlli di selezione.

Ecco la parte di visualizzazione pertinente:

<select [ngFormControl]="form.controls.employee" [(ngModel)]="employeeModel">
  <option value="" selected></option>
  <option value="Yes">Yes</option>
  <option value="No">No</option>
</select>
...
<input [ngFormControl]="form.controls.employeeID" type="text" maxlength="255" [(ngModel)]="request.empID" />

La parte componente rilevante:

export class RequestComponent {
  form: ControlGroup;
  request: RequestItem;

  constructor(private fb: FormBuilder) {
      this.form = fb.group({
        employee: new Control("", Validators.required),
        empID: new Control("", Validators.compose([Validators.pattern("[0-9]{7}"]))
      });

  get employeeModel() {
    return this.request.isEmployee;
  }

  set employeeModel(value) {
    this.request.isEmployee = value;
    if (value === "Yes") {
      this.form.controls["empID"].validator = Validators.compose([Validators.pattern("[0-9]{7}"), Validators.required]);
      this.form.controls["empID"].updateValueAndValidity();
    }
    else {
      this.form.controls["empID"].validator = Validators.compose([Validators.pattern("[0-9]{7}")]);
      this.form.controls["empID"].updateValueAndValidity();
    }
  }
}

Nel mio caso ho sempre avuto una convalida del pattern legata al controllo, quindi validatorè sempre impostato su qualcosa, ma penso che puoi impostare validatorsu null se non hai alcuna convalida legata al controllo.

AGGIORNAMENTO: Esistono altri metodi per acquisire la modifica del modello (ngModelChange)=changeFunctionName($event)o per iscriversi al controllo delle modifiche ai valori utilizzandothis.form.controls["employee"].valueChanges.subscribe(data => ...))

Ho provato la maggior parte di queste risposte ma nessuna ha funzionato per me. Ho trovato un esempio funzionante qui https://scotch.io/@ibrahimalsurkhi/match-password-validation-with-angular-2

equalToStavo cercando anche questo e ho finito per utilizzare dal pacchetto ng2-validation ( https://www.npmjs.com/package/ng2-validation )

Ecco un esempio: Template Driven:

<input type="password" ngModel name="password" #password="ngModel" required/>
<p *ngIf="password.errors?.required">required error</p>
<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password"/>
<p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>

Modello guidato:

let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.equalTo(password));

this.form = new FormGroup({
  password: password,
  certainPassword: certainPassword
});

Modello:

<form [formGroup]="form">
  <input type="password" formControlName="password"/>
  <p *ngIf="form.controls.password.errors?.required">required error</p>
  <input type="password" formControlName="certainPassword"/>
  <p *ngIf="form.controls.certainPassword.errors?.equalTo">equalTo error</p>
</form>

Ecco la mia versione che ho usato per assicurarmi che l'età in un campo sia maggiore o uguale all'età in un altro campo. Sto usando anche i gruppi di moduli, quindi uso la group.getfunzione anzichégroup.controls[]

import { FormGroup } from '@angular/forms';

export function greaterThanOrEqualTo(sourceKey: string, targetKey: string) {
    return (group: FormGroup) => {
        let sourceInput = group.get(sourceKey);
        let targetInput = group.get(targetKey);

        console.log(sourceInput);
        console.log(targetInput);

        if (targetInput.value < sourceInput.value) {
            return targetInput.setErrors({ notGreaterThanOrEqualTo: true })
        }
    }
}

E nel componente:

    this.form = this._fb.group({

        clientDetails: this._fb.group({
            currentAge: ['', [Validators.required, Validators.pattern('^((1[89])|([2-9][0-9])|100)$')]],
            expectedRetirementAge: ['', [Validators.required]]
        }),

    },
    {
        validator: greaterThanOrEqualTo('clientDetails.currentAge', 'clientDetails.expectedRetirementAge')
    });

Penso che la soluzione migliore, per ora, sia creare un formgroup per mantenere i tuoi controlli. Quando crei un'istanza del tuo passaggio di controllo nella funzione per convalidarlo. esempio:

    this.password = new Control('', Validators.required);
    let x = this.password;
    this.confirm = new Control('', function(c: Control){
        if(typeof c.value === 'undefined' || c.value == "") return {required: "password required"};
        if(c.value !== x.value)
            return {error: "password mismatch"};
        return null;
    });

so che questo dipende molto dalla versione di angularjs2 che stai utilizzando. Questo è stato testato contro 2.0.0-alpha.46

Se qualcuno ha un suggerimento migliore come scrivere un validatore personalizzato (che potrebbe essere il modo migliore per farlo) è il benvenuto.

MODIFICARE

puoi anche usare ControlGroup e convalidare quel gruppo interamente.

this.formGroup = new ControlGroup({}, function(c: ControlGroup){
        var pass: Control = <Control>c.controls["password"];
        var conf: Control = <Control>c.controls["confirm"];
        pass.setErrors(null, true);
        if(pass.value != null && pass.value != ""){
            if(conf.value != pass.value){
                pass.setErrors({error: "invalid"}, true);
                return {error: "error"};
            }
        }
        return null;
    });

Basta modificare i messaggi in base al tuo dominio.

La risposta di Louis Cruz è stata molto utile per me.

Per completare basta aggiungere in else il setErrors reset: return passwordConfirmationInput.setErrors (null);

E tutto funziona bene!

Grazie,

Saluti,

TGA

Angular 8 Esempio di validazione sul campo di conferma della password

FYI: questo non aggiornerà la convalida nel campo passwordConfirm se il campo principale "password" viene modificato dopo che questa convalida è stata superata. Tuttavia, puoi invalidare il campo di conferma della password quando un utente digita nel campo della password

<input
  type="password"
  formControlName="password"
  (input)="registerForm.get('passwordConfirm').setErrors({'passwordMatches': true})"
/>

register.component.ts

import { PasswordConfirmValidator } from './password-confirm-validator';

export class RegisterComponent implements OnInit {
  registerForm: FormGroup = this.createRegisterForm({
    username: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', [
      Validators.required,
      Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$'),
      Validators.minLength(8)
    ]),
    passwordConfirm: new FormControl('', [
      Validators.required,
      PasswordConfirmValidator //custom validator
    ])
  });
}

Password-confirm-validator.ts

import { AbstractControl } from '@angular/forms';

export function PasswordConfirmValidator(control: AbstractControl) {
  if(void 0 === control){ return null; }
  if(
    void 0 !== control.parent &&
    void 0 !== control.parent.controls &&
    void 0 !== control.parent.controls['password'] &&
    control.parent.controls['password'].value === control.value
  ){
    return null;
  }
  return {passwordMatches: true};
}

register.component.html

{{registerForm.get('passwordConfirm').hasError('passwordMatches')}}

Suggerirei di utilizzare la libreria ng-form-rules. È una libreria fantastica per creare tutti i diversi tipi di moduli con logica di convalida disaccoppiata dal componente e che può dipendere dai cambiamenti di valore di altre aree del modulo. Hanno un'ottima documentazione , esempi e un video che mostra molte delle sue funzionalità . Fare la convalida in questo modo quello che stai cercando di fare è banale.

Puoi controllare il loro README per alcune informazioni di alto livello e un esempio di base.

Regole di convalida della corrispondenza della password di Angular 4.

Se hai bisogno di errori nei campi di controllo, puoi farlo.

createForm() {
    this.ngForm = this.fb.group({
       'first_name': ["", Validators.required ],
       'last_name' : ["", Validators.compose([Validators.required, Validators.minLength(3)]) ],
       'status' : ['active', Validators.compose([Validators.required])],
       'phone':[null],
       'gender':['male'],
       'address':[''],
       'email':['', Validators.compose([
          Validators.required, 
          Validators.email])],
       'password':['', Validators.compose([Validators.required])],
       'confirm_password':['', Validators.compose([Validators.required])]
    }, {validator: this.matchingPassword('password', 'confirm_password')});
  }

Quindi è necessario dichiarare questo metodo nel constructormetodo Like as.

constructor(
    private fb: FormBuilder

    ) {
    this.createForm();
  }

Invece di impostare un errore sul ControlGroup, farlo sul campo effettivo come segue:

    matchingPassword(passwordKey: string, confirmPasswordKey: string) {
  return (group: FormGroup): {[key: string]: any} => {
    let password = group.controls[passwordKey];
    let confirm_password = group.controls[confirmPasswordKey];

    if (password.value !== confirm_password.value) {
      return {        
        mismatchedPasswords: true
      };
    }
  }
}

Parte HTML per gruppo di password

<form [formGroup]="ngForm" (ngSubmit)="ngSubmit()">
    <div class="form-group">
            <label class="control-label" for="inputBasicPassword"> Password <span class="text-danger">*</span></label>
                <input type="password" class="form-control" formControlName="password" placeholder="Password" name="password" required>
                <div class="alert text-danger" *ngIf="!ngForm.controls['password'].valid && ngForm.controls['password'].touched">This Field is Required.</div>
            </div>
            {{ngForm.value.password | json}}
            <div class="form-group">
            <label class="control-label" for="inputBasicPassword">Confirm Password <span class="text-danger">*</span></label>
                <input type="password" class="form-control" name="confirm_password" formControlName="confirm_password" placeholder="Confirm Password" match-password="password">

    <div class='alert text-danger' *ngIf="ngForm.controls.confirm_password.touched && ngForm.hasError('mismatchedPasswords')">
              Passwords doesn't match.
      </div>
    </div>
<button type="submit" [disabled]="!ngForm.valid" class="btn btn-primary ladda-button" data-plugin="ladda" data-style="expand-left" disabled="disabled"><span class="ladda-label">
            <i class="fa fa-save"></i>  Create an account
        <span class="ladda-spinner"></span><div class="ladda-progress" style="width: 0px;"></div>
        </span><span class="ladda-spinner"></span></button>
</form>