Как я могу установить валидаторы угловой формы и если она уже имеет недопустимые значения, обнаружена ошибка - PullRequest
Новая
       31

Как я могу установить валидаторы угловой формы и если она уже имеет недопустимые значения, обнаружена ошибка

0 голосов
/ 20 сентября 2019

Здесь я оставил пример с помощью stackblitz

https://change -validation-form.stackblitz.io

Я экспериментирую с формами, и мне нужно, чтобы они изменилисьих проверка в зависимости от значения, которое было назначено комбо.Например, это скидка на стипендию.Который может быть в количестве или процентах.И в случае, если это процент, мне нужно проверить, что он не больше 100.

Я работаю с FormGroup.В угловых и я не нашел способ установить проверки ввода и пометить ошибку без необходимости писать что-то еще для проверки 

            mat-form-field.full-width(appearance="fill")
                mat-label Sel. type desc
                mat-select(formControlName="tipo_desc", (selectionChange)="changeTipoDesc($event)")
                    mat-option(*ngFor="let desc of metadata_prom[0].combo", [value]="desc.valor")  {{ desc.desc }}


            mat-form-field.full-width(floatLabel="auto", appearance="fill")
                mat-label Cant
                input(matInput , placeholder="", formControlName="cantidad", autocomplete="off", type="number")
                span(matSuffix) {{ symbol }}
                mat-error(*ngIf="becaForm.controls.cantidad.invalid")
                    ng-container(*ngIf="becaForm.controls.cantidad.errors.required; else elseif1")  Ingresa una cantidad
                    ng-template(#elseif1)
                        ng-container(*ngIf="becaForm.controls.cantidad.errors.max; else elseif2")  {{ becaForm.controls.cantidad.errors.max.max }} 
                    ng-template(#elseif2)
                        ng-container(*ngIf="becaForm.controls.cantidad.errors.pattern") only numbers


    _buildForm(data){
        let campos = {
            descripcion : [{
                value    : null,
                disabled : false
            }, [
                Validators.required,
                Validators.maxLength(50)
            ]],
            tipo_desc : [{
                value    : null,
                disabled : false
            }, [
                Validators.required
            ]],
            cantidad : [{
                value    : null,
                disabled : false
            }, [
                Validators.required
            ]]
        };
        let form = this._formBuilder.group(campos);
        return form;
    }

    changeTipoDesc(event) {
        let [monto, porcentaje]= this.metadata_prom[0].combo
        if(monto.valor == event.value) {
            this.becaForm.controls.cantidad.setValidators([
                Validators.required,
                Validators.pattern(/^[0-9]{1,10}$/),
                Validators.max(10000)
            ]);
            this.becaForm.controls.cantidad.markAsTouched();
            this.becaForm.updateValueAndValidity;

        } else if(porcentaje.valor == event.value) {
            this.becaForm.controls.cantidad.setValidators([
                Validators.required,
                Validators.pattern(/^[0-9]{1,10}$/),
                Validators.max(100)
            ]);
            this.becaForm.controls.cantidad.markAsTouched();
            this.becaForm.updateValueAndValidity;

        }
    }

1 Ответ

0 голосов
/ 20 сентября 2019 
 if (this.becaForm.controls.get('cantidad').value.indexOf('%') != -1) {
      if (Number(this.becaForm.controls.get('cantidad').value) > 100) {
          this.becaForm.controls["cantidad"].setErrors({ 'incorrect': true });
          this.becaForm.controls["cantidad"].updateValueAndValidity();
      } else {
          //some logic here
      }
 }

Пожалуйста, предоставьте стек в следующий раз для воспроизведения вопроса.

...