Apakah mungkin untuk membuat validator yang dapat menggunakan beberapa nilai untuk memutuskan apakah bidang saya valid?

misalnya jika metode kontak yang disukai pelanggan adalah melalui email maka bidang email harus diisi.

Terima kasih.

Diperbarui dengan kode contoh ...

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

    }

Untuk mengulangi metode yang telah diposting orang lain, ini adalah cara saya membuat FormGroupvalidator yang tidak melibatkan banyak grup.

Untuk contoh ini, cukup berikan nama kunci bidang passworddan 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')})

Untuk Validatorsmengambil parameter, mereka perlu mengembalikan a functiondengan FormGroupatau FormControlsebagai parameter. Dalam kasus ini, saya memvalidasi 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
      };
    }
  }
}

Secara teknis, saya bisa memvalidasi dua nilai jika saya tahu kuncinya, tetapi saya lebih suka memberi nama saya Validatorssama dengan kesalahan yang akan mereka kembalikan. Fungsi tersebut dapat dimodifikasi untuk mengambil parameter ketiga yang mewakili nama kunci dari kesalahan yang dikembalikan.

Diperbarui 6 Desember 2016 (v2.2.4)

Contoh Lengkap: https://embed.plnkr.co/ukwCXm/

Jawaban Dave sangat, sangat membantu. Namun, sedikit modifikasi mungkin bisa membantu beberapa orang.

Jika Anda perlu menambahkan kesalahan ke Controlbidang, Anda dapat menyimpan konstruksi formulir dan validator yang sebenarnya:

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

Alih-alih menyetel kesalahan pada ControlGroup, lakukan di bidang aktual sebagai berikut:

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

Saat menerapkan validator untuk beberapa bidang formulir, Anda harus memastikan, bahwa validator dievaluasi ulang saat setiap kontrol formulir diperbarui. Sebagian besar contoh tidak memberikan solusi untuk skenario tersebut, tetapi ini sangat penting untuk konsistensi data dan perilaku yang benar.

Silakan lihat implementasi saya dari validator khusus untuk Angular 2, yang memperhitungkan hal ini: https://gist.github.com/slavafomin/17ded0e723a7d3216fb3d8bf845c2f30 .

Saya menggunakan otherControl.valueChanges.subscribe()untuk mendengarkan perubahan dalam kontrol lain dan thisControl.updateValueAndValidity()untuk memicu putaran validasi lain saat kontrol lain diubah.

Saya menyalin kode di bawah ini untuk referensi di masa mendatang:

match-other-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;

  }

}

Pemakaian

Inilah cara Anda menggunakannya dengan bentuk reaktif:

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

Validator terbaru lainnya dapat ditemukan di sini: moebius-mlm / ng-validators .

Saya menggunakan Angular 2 RC.5 tetapi tidak dapat menemukan ControlGroup, berdasarkan jawaban yang membantu dari Dave. Saya menemukan bahwa FormGroup berfungsi sebagai gantinya. Jadi saya melakukan beberapa pembaruan kecil pada kode Dave, dan berpikir saya akan berbagi dengan orang lain.

Di file komponen Anda, tambahkan impor untuk FormGroup:

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

Tentukan masukan Anda jika Anda perlu mengakses kontrol formulir secara langsung:

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

Dalam konstruktor Anda, buat contoh formulir Anda:

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

Tambahkan fungsi matchingPasswords di kelas Anda:

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

Semoga ini bisa membantu mereka yang menggunakan RC.5. Perhatikan bahwa saya belum menguji RC.6.

Banyak penggalian di sumber sudut tetapi saya telah menemukan cara yang lebih baik.

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

Bagian HTML untuk grup kata sandi

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

Untuk memperluas jawaban matthewdaniel karena itu tidak sepenuhnya benar. Berikut adalah beberapa contoh kode yang menunjukkan cara menetapkan validator dengan benar ke 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
    };
  }
}

Berikut adalah contoh yang berfungsi: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview

Berikut adalah opsi lain yang bisa saya dapatkan yang tidak bergantung pada keseluruhan atau sub ControlGrouptetapi terikat langsung ke masing-masing Control.

Masalah yang saya miliki adalah kontrol yang bergantung satu sama lain tidak secara hierarkis bersama sehingga saya tidak dapat membuat file ControlGroup. Selain itu, CSS saya telah diatur sehingga setiap kontrol akan memanfaatkan kelas sudut yang ada untuk menentukan apakah akan menampilkan gaya kesalahan, yang lebih rumit saat berurusan dengan validasi grup daripada validasi khusus kontrol. Mencoba untuk menentukan apakah satu kontrol valid tidak mungkin karena validasi terkait dengan kelompok kontrol dan bukan setiap kontrol individu.

Dalam kasus saya, saya ingin nilai kotak pilih untuk menentukan apakah bidang lain akan diperlukan atau tidak.

Ini dibangun menggunakan Form Builder pada komponen. Untuk model pilih alih-alih langsung mengikatnya ke nilai objek permintaan, saya telah mengikatnya untuk mendapatkan / menyetel fungsi yang akan memungkinkan saya menangani peristiwa "saat diubah" untuk kontrol. Kemudian saya akan dapat mengatur validasi secara manual untuk kontrol lain tergantung pada nilai baru kontrol pilih.

Berikut adalah bagian tampilan yang relevan:

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

Bagian komponen yang relevan:

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

Dalam kasus saya, saya selalu memiliki validasi pola yang terkait dengan kontrol sehingga validatorselalu diatur ke sesuatu tetapi saya pikir Anda dapat mengatur validatorke nol jika Anda tidak memiliki validasi yang terkait dengan kontrol.

UPDATE: Ada metode lain untuk menangkap perubahan model seperti (ngModelChange)=changeFunctionName($event)atau berlangganan perubahan nilai kontrol dengan menggunakanthis.form.controls["employee"].valueChanges.subscribe(data => ...))

Saya mencoba sebagian besar jawaban ini tetapi tidak ada yang berhasil untuk saya. Saya menemukan contoh yang berfungsi di sini https://scotch.io/@ibrahimalsurkhi/match-password-validation-with-angular-2

equalToMencari ini juga dan akhirnya menggunakan dari paket validasi ng2 ( https://www.npmjs.com/package/ng2-validation )

Berikut ini contohnya: Didorong Template:

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

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

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

Template:

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

Ini adalah versi saya yang saya gunakan untuk memastikan usia di satu bidang lebih besar atau sama dengan usia di bidang lain. Saya menggunakan grup formulir juga, jadi saya menggunakan group.getfungsi daripadagroup.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 })
        }
    }
}

Dan di komponen:

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

Saya pikir taruhan terbaik Anda, untuk saat ini, adalah membuat grup formulir untuk memegang kendali Anda. Saat Anda membuat instance Control, berikan fungsi untuk memvalidasinya. contoh:

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

saya tahu ini sangat tergantung pada versi angularjs2 yang Anda jalankan. Ini telah diuji terhadap 2.0.0-alpha.46

Jika ada yang memiliki saran yang lebih baik seperti menulis validator khusus (yang mungkin merupakan cara terbaik untuk melakukannya), ini diterima.

EDIT

Anda juga dapat menggunakan ControlGroup dan memvalidasi grup itu secara keseluruhan.

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

Cukup edit pesan-pesan tersebut sesuai dengan domain Anda.

Jawaban Louis Cruz sangat membantu saya.

Untuk menyelesaikannya, tambahkan saja setErrors reset: return passwordConfirmationInput.setErrors (null);

Dan semuanya bekerja dengan baik!

Terimakasih,

Salam,

TGA

Angular 8 Contoh validasi pada bidang konfirmasi kata sandi

FYI: ini tidak akan memperbarui validasi pada kolom passwordConfirm jika kolom "password" utama diubah setelah validasi ini berlalu. Tapi, Anda dapat membatalkan bidang konfirmasi kata sandi saat pengguna mengetik di bidang kata sandi

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

Saya akan menyarankan menggunakan perpustakaan ng-form-rules. Ini adalah pustaka yang luar biasa untuk membuat semua jenis formulir dengan logika validasi yang dipisahkan dari komponen dan yang dapat bergantung pada perubahan nilai dari area lain dalam formulir. Mereka memiliki dokumentasi , contoh , dan video hebat yang menunjukkan banyak fungsinya . Melakukan validasi seperti ini, apa yang Anda coba lakukan itu sepele.

Anda dapat memeriksa README mereka untuk beberapa info tingkat tinggi dan contoh dasar.

Angular 4 kata sandi cocok dengan aturan validasi.

Jika Anda perlu bidang kontrol kesalahan maka Anda dapat melakukannya.

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

Maka kebutuhan Anda untuk mendeklarasikan metode ini dalam constructormetode Like as.

constructor(
    private fb: FormBuilder

    ) {
    this.createForm();
  }

Alih-alih menyetel kesalahan pada ControlGroup, lakukan di bidang aktual sebagai berikut:

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

Bagian HTML untuk grup kata sandi

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