Angular에서 컨트롤이 생성된 후 FormControl에 Validator를 추가하는 방법은 무엇입니까?

Angular에서 컨트롤이 생성된 후 FormControl에 Validator를 추가하는 방법은 무엇입니까?

동적으로 구축된 형태의 구성요소가 있습니다.유효성 검사기를 사용하여 컨트롤을 추가하는 코드는 다음과 같습니다.

var c = new FormControl('', Validators.required);

하지만 나중에 두 번째 검증자를 추가하고 싶습니다.어떻게 하면 이를 달성할 수 있을까요?온라인에서 문서를 찾을 수 없습니다.하지만 형태 제어 장치에setValidators

this.form.controls["firstName"].setValidators 

그러나 새 또는 사용자 지정 검증자를 추가하는 방법은 명확하지 않습니다.

당신은 간단히 통과합니다.FormControl일련의 검증자들

다음은 기존 FormControl에 검증자를 추가하는 방법을 보여주는 예입니다.

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

": " " " " " " 을 때 됩니다.FormControl.

각도 12 업데이트

에 새 하려면 Angular 12를 사용하면 .addValidator:

this.form.controls["firstName"].addValidators([Validators.minLength(1), Validators.maxLength(30)]);

@Delosdos가 게시한 내용에 추가합니다.

에서 컨트롤에 대한 검증자 설정FormGroup:this.myForm.controls['controlName'].setValidators([Validators.required])

FormGroup의 컨트롤에서 검증자를 제거합니다.this.myForm.controls['controlName'].clearValidators()

위의 행 중 하나를 실행한 후 양식 그룹을 업데이트합니다. this.myForm.controls['controlName'].updateValueAndValidity()

이것은 양식 유효성 검사를 프로그래밍 방식으로 설정하는 놀라운 방법입니다.

반응형 Form Module을 사용하고 있으며 formGroup이 다음과 같이 정의되어 있는 경우:

public exampleForm = new FormGroup({
        name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
        email: new FormControl('test@example.com', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

다음과 같은 접근 방식을 통해 FormControl에 새 검증자를 추가하고 이전 검증자를 유지할 수 있습니다.

this.exampleForm.get('age').setValidators([
        Validators.pattern('^[0-9]*$'),
        this.exampleForm.get('age').validator
]);
this.exampleForm.get('email').setValidators([
        Validators.email,
        this.exampleForm.get('email').validator
]);

FormControl.validator는 이전에 정의된 모든 검증자를 포함하는 합성 검증자를 반환합니다.

추가된 양식 컨트롤에서 일부 기존 유효성 검사를 제거해야 하는 경우 컨트롤의 아래 기능을 호출합니다.

this.form.controls["name"].clearValidators();

그런 다음 양식 컨트롤을 업데이트하려면 아래 기능을 호출해야 합니다. 이 기능은 양식 컨트롤에 즉시 적용됩니다.

this.form.controls['name'].updateValueAndValidity();

이미 추가된 양식 컨트롤에 대한 유효성 검사를 추가해야 하는 경우 컨트롤의 아래 기능을 호출합니다.

this.signupForm.controls['name'].setValidators([Validators.required]);

그 통화 후에updateValueAndValidity()즉시 작동하므로 즉시 반영됩니다.

에두아르트 보이드 외에도 여기 답이 있습니다.addValidators방법:

declare module '@angular/forms' {
  interface FormControl {
    addValidators(validators: ValidatorFn[]): void;
  }
}

FormControl.prototype.addValidators = function(this: FormControl, validators: ValidatorFn[]) {
  if (!validators || !validators.length) {
    return;
  }

  const old_validator = this.validator;

  this.clearValidators();
  this.setValidators( old_validator ? [ old_validator , ...validators ] : validators );
};

이를 사용하여 검증자를 동적으로 설정할 수 있습니다.

some_form_control.addValidators([ first_validator, second_validator ]);
some_form_control.addValidators([ third_validator ]);

원래 질문이 "formControl을 만든 후에 새 검증자를 추가하는 방법"이기 때문에 선택한 답변이 올바르지 않다고 생각합니다.

제가 알기로는 그건 불가능해요.당신이 할 수 있는 유일한 일은 검증자들의 배열을 동적으로 만드는 것입니다.

그러나 formControl에 이미 추가된 검증자를 재정의하지 않도록 함수 addValidator()가 있어야 합니다.그 요구 사항에 대한 답을 가진 사람이 있다면, 여기에 게시하면 좋을 것입니다.

간단한 해결책은 먼저 양식 제어의 모든 검증자를 가져오고 필요한 코드가 이렇게 될 때 새로운 검증자 Fn을 할당하는 것입니다.

//get existing validators and assign a new validator

const formControl = this.form.controls["firstName"];

 const validators: ValidatorFn[] = !!formControl.validator ?
  [formControl.validator, Validators.required] :
  [Validators.required];

formControl.setValidators(validators);

formControl.validator는 기존 검증자(비동기 검증자가 아님)를 보유합니다. 우리는 ternary를 사용하여 null이 아닌지 확인하고 여기에 추가합니다(여기서 필수 검증자를 추가합니다). 그렇지 않으면 새 검증자를 할당합니다.

다른 양식 컨트롤의 값을 기준으로 검증자를 업데이트하는 중입니다.

먼저 양식을 설정합니다.

  form: FormGroup = new FormGroup({
    firstName: new FormControl<string>(null),
    lastName: new FormControl<string>(null),
  });

그리고 나서 init:

  ngOnInit(): void {
    this.form.get('firstName').valueChanges.subscribe((value) => {
      if (value) {
        this.form.get('lastName').setValidators(Validators.nullValidator);
      } else {
        this.form.get('lastName').setValidators(Validators.required);
      }
      this.form.get('lastName').updateValueAndValidity({ emitEvent: false });
    });
    this.form.get('lastName').valueChanges.subscribe((value) => {
      if (value) {
        this.form.get('firstName').setValidators(Validators.nullValidator);
      } else {
        this.form.get('firstName').setValidators(Validators.required);
      }
      this.form.get('firstName').updateValueAndValidity({ emitEvent: false });
    });
  }

추가하는 것이 중요합니다.{ emitEvent: false }따라서 최대 통화 스택 크기 초과 오류가 발생하지 않습니다.

언급URL : https://stackoverflow.com/questions/38797414/in-angular-how-to-add-validator-to-formcontrol-after-control-is-created