Alanımın geçerli olup olmadığına karar vermek için birden çok değer kullanabilen bir doğrulayıcı oluşturmak mümkün mü?

Örneğin, müşterinin tercih ettiği iletişim yöntemi e-posta yoluyla ise, e-posta alanı gerekli olmalıdır.

Teşekkürler.

Örnek kod ile güncellendi ...

    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 };
            }
        }

    }

Diğerlerinin yayınladığı yöntemleri tekrarlamak gerekirse FormGroup, birden fazla grup içermeyen doğrulayıcılar yaratma şeklim budur.

Bu örnek için, basitçe passwordve confirmPasswordalanlarının anahtar adlarını sağlayın .

// 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')})

ValidatorsParametre alabilmek için , functionya a ile FormGroupya FormControlda bir parametre olarak a döndürmeleri gerekir . Bu durumda, bir 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
      };
    }
  }
}

Teknik olarak, anahtarlarını bilseydim herhangi iki değeri doğrulayabilirdim, ancak Validatorsdönecekleri hatayla aynı adı vermeyi tercih ederim . İşlev, döndürülen hatanın anahtar adını temsil eden üçüncü bir parametre alacak şekilde değiştirilebilir.

6 Aralık 2016'da güncellendi (v2.2.4)

Tam Örnek: https://embed.plnkr.co/ukwCXm/

Dave'in cevabı çok çok yardımcı oldu. Bununla birlikte, küçük bir değişiklik bazı insanlara yardımcı olabilir.

ControlAlanlara hata eklemeniz gerekirse, formun ve doğrulayıcıların gerçek yapısını koruyabilirsiniz:

// 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')})

Üzerinde bir hata ayarlamak yerine ControlGroup, bunu gerçek alanda aşağıdaki gibi yapın:

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})
    }
  }
}

Doğrulayıcıları birden çok form alanı için uygularken, her form denetimi güncellendiğinde doğrulayıcıların yeniden değerlendirildiğinden emin olmanız gerekir. Örneklerin çoğu böyle bir senaryo için bir çözüm sağlamaz, ancak bu, veri tutarlılığı ve doğru davranış için çok önemlidir.

Lütfen bunu dikkate alan Angular 2 için özel bir doğrulayıcı uygulamama bakın: https://gist.github.com/slavafomin/17ded0e723a7d3216fb3d8bf845c2f30 .

otherControl.valueChanges.subscribe()Diğer denetimdeki değişiklikleri dinlemek ve thisControl.updateValueAndValidity()diğer denetim değiştirildiğinde başka bir doğrulama turunu tetiklemek için kullanıyorum .

İleride başvurmak için aşağıdaki kodu kopyalıyorum:

maç-diğer-validator.ts

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;

  }

}

kullanım

Reaktif formlarla bunu şu şekilde kullanabilirsiniz:

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

Daha güncel doğrulayıcılar burada bulunabilir: moebius-mlm / ng-doğrulayıcılar .

Angular 2 RC.5 kullanıyorum, ancak Dave'in yardımcı cevabına göre ControlGroup'u bulamadım. Bunun yerine FormGroup'un çalıştığını buldum. Ben de Dave'in kodlarıyla ilgili bazı küçük güncellemeler yaptım ve başkalarıyla paylaşacağımı düşündüm.

Bileşen dosyanızda, FormGroup için bir içe aktarma ekleyin:

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

Form denetimine doğrudan erişmeniz gerektiğinde girişlerinizi tanımlayın:

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

Yapıcınızda, formunuzu somutlaştırın:

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

EşleşenPasswords işlevini sınıfınıza ekleyin:

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})
    }
  }
}

Umarım bu, RC.5 kullananlara yardımcı olur. Henüz RC.6'da test etmediğimi unutmayın.

Açısal kaynakta birçok kazma var ama daha iyi bir yol buldum.

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
    };
}

Şifre grubu için HTML bölümü

<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>

Matthewdaniel'in cevabını tam olarak doğru olmadığı için genişletmek. Burada bir doğrulayıcının nasıl düzgün bir şekilde atanacağını gösteren bazı örnek kod 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
    };
  }
}

İşte çalışan bir örnek: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview

İşte bulabildiğim, bir bütüne veya alt ControlGroupkısma bağlı olmayan, ancak doğrudan her birine bağlı olan başka bir seçenek Control.

Karşılaştığım sorun, birbirine bağımlı olan kontrollerin hiyerarşik olarak birlikte olmamasıydı, bu yüzden bir ControlGroup. Ayrıca, benim CSS'im, her bir denetimin hata stilinin görüntülenip görüntülenmeyeceğini belirlemek için mevcut açısal sınıflardan yararlanacağı şekilde ayarlanmıştı; bu, bir denetime özgü doğrulama yerine bir grup doğrulamasıyla uğraşırken daha karmaşıktı. Tek bir kontrolün geçerli olup olmadığını belirlemeye çalışmak, doğrulama her bir kontrole değil, kontrol grubuna bağlı olduğundan mümkün olmadı.

Benim durumumda, başka bir alanın gerekli olup olmayacağını belirlemek için bir seçim kutusu değerinin olmasını istedim.

Bu, bileşendeki Form Oluşturucu kullanılarak oluşturulur. Select modeli için, onu doğrudan istek nesnesinin değerine bağlamak yerine, kontrol için "on change" olaylarını işlememe izin verecek get / set işlevlerine bağladım. Daha sonra, seçilen kontrollerin yeni değerine bağlı olarak başka bir kontrol için doğrulamayı manuel olarak ayarlayabileceğim.

İşte ilgili görünüm kısmı:

<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" />

İlgili bileşen kısmı:

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();
    }
  }
}

Benim durumumda her zaman kontrole bağlı bir model doğrulamasına sahiptim, bu yüzden validatorher zaman bir şeye ayarlı, ancak validatorkontrole bağlı herhangi bir doğrulama yoksa bence null olarak ayarlayabilirsiniz .

GÜNCELLEME: Model değişikliğini yakalamanın (ngModelChange)=changeFunctionName($event)veya değer değişikliklerini kontrol etmeye abone olma gibi başka yöntemler de vardır.this.form.controls["employee"].valueChanges.subscribe(data => ...))

Bu cevapların çoğunu denedim ama hiçbiri benim için işe yaramadı. Burada çalışan bir örnek buldum https://scotch.io/@ibrahimalsurkhi/match-password-validation-with-angular-2

Bunu da arıyordum ve equalTong2-doğrulama paketinden ( https://www.npmjs.com/package/ng2-validation ) kullanmaya son verdi

İşte bir örnek: Şablona Dayalı:

<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>

Model Tahrikli:

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

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

Şablon:

<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>

İşte bir alandaki yaşın başka bir alandaki yaşa eşit veya ondan büyük olmasını sağlamak için kullandığım versiyonum. Ben de form grupları kullanıyorum, bu yüzden group.getişlevi yerinegroup.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 })
        }
    }
}

Ve bileşende:

    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')
    });

Şimdilik en iyi seçeneğinizin kontrollerinizi elinde bulunduracak bir form grubu oluşturmak olduğunu düşünüyorum. Kontrol geçişinizi doğrulamak için fonksiyona örneklediğinizde. misal:

    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;
    });

Bunun çalıştırdığınız angularjs2 sürümüne büyük ölçüde bağlı olduğunu biliyorum. Bu, 2.0.0-alpha.46'ya karşı test edildi

Herhangi birinin özel bir doğrulayıcı yazmak gibi daha iyi bir önerisi varsa (bu, gitmenin en iyi yolu olabilir) hoş karşılanır.

DÜZENLE

Ayrıca ControlGroup'u kullanabilir ve bu grubu bütünüyle doğrulayabilirsiniz.

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;
    });

İletileri etki alanınıza göre düzenleyin.

Louis Cruz'un cevabı benim için çok yardımcı oldu.

Tamamlamak için setErrors sıfırlanmasını başka bir yere ekleyin: return passwordConfirmationInput.setErrors (null);

Ve her şey iyi çalışıyor!

Teşekkürler,

Saygılarımızla,

TGA

Açısal 8 Parola doğrulama alanında doğrulama örneği

Bilginize: Bu olacak değil bu doğrulama geçtikten sonra ana "Şifre" alanı değiştirilirse passwordConfirm sahada doğrulama güncelleyin. Ancak, bir kullanıcı şifre alanına girdiğinde şifre doğrulama alanını geçersiz kılabilirsiniz.

<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
    ])
  });
}

şifre onaylama-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')}}

Kütüphaneyi kullanmanızı öneririm ng-form-rules. Bileşenden ayrılmış doğrulama mantığı ile tüm farklı form türlerini oluşturmak için harika bir kitaplıktır ve formdaki diğer alanların değer değişikliklerine bağlı olabilir. Onlar sahip büyük bir dokümantasyon , örnekler ve videoyu olduğunu gösterir işlevselliği bir demet . Bu şekilde doğrulama yapmak, yapmaya çalıştığınız şey önemsizdir.

Bazı üst düzey bilgiler ve temel bir örnek için BENİOKU'larına bakabilirsiniz .

Açısal 4 şifre eşleşme doğrulama kuralları.

Kontrol alanlarında hata yapmanız gerekiyorsa, bunu yapabilirsiniz.

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')});
  }

O zaman bu constructoryöntemi Like as yönteminde bildirmeniz gerekir .

constructor(
    private fb: FormBuilder

    ) {
    this.createForm();
  }

Kontrol Grubunda bir hata ayarlamak yerine, bunu gerçek alanda aşağıdaki gibi yapın:

    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
      };
    }
  }
}

Şifre grubu için HTML bölümü

<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>