1

introducir la descripción de la imagen aquíNecesito poder activar el pattern del input Name cuando selecciono la opción Component del input type, que el pattern solo aplique cuando esta Component seleccionado.

introducir la descripción de la imagen aquí

Name <input type="text" name="name" formControlName="name" class="form-control" [ngClass]="{ 'is-invalid': submittedItem && itemControls.name.invalid }" [readonly]="itemSaving" pattern="[a-z0-9-_-]+">

        <div class="spinner-border spinner-border-sm text-blue-primary" ole="status" aria-hidden="true" *ngIf="itemControls.name.pending">
          <span class="sr-only">Loading...</span>
        </div>

        <div class="invalid-feedback" *ngIf="submittedItem && itemControls.name.invalid">
          <p *ngIf="itemControls.name.errors?.nameTaken">This name is already taken.</p>
          <p *ngIf="itemControls.name.errors.required">Name is required.</p>
          <p *ngIf="itemControls.name.errors.minlength">Name must be at least 4 characters long.</p>
          <p *ngIf="itemControls.name.errors.pattern">The name only admits lowercase characters and digits.</p>
        </div>
      <br>
      <label>Type</label>
      <select name="type" class="form-control" formControlName="type"
        [ngClass]="{ 'is-invalid': submittedItem && itemControls.type.invalid }">
        <option selected disabled value="">Choose one...</option>
        <option *ngFor="let type of typeItems" [value]="type">
          {{ type | titlecase }}
        </option>
      </select>
      <div class="invalid-feedback" *ngIf="submittedItem && itemControls.type.invalid">
        <p *ngIf="itemControls.type.errors.required">Type is required.</p>
      </div>
2
  • Puedes poner el código de tu componente?
    – Legna
    el 25 nov. 2021 a las 16:14
  • ahi pongo la lógica el 25 nov. 2021 a las 16:39

1 respuesta 1

1

Puedes suscribirte al formControl para escuchar sus cambios:

  validador = Validators.pattern('aaaa');



  ngOnInit() {
    this.miFormulario.get('type').valueChanges.subscribe((x) => {
      if (x === 'Componenent') {
        this.miFormulario.get('name').addValidators(this.validador);
      } else {
        //Debe ser la misma referencia para que lo remueva
        this.miFormulario.get('name').removeValidators(this.validador);
      }

      this.miFormulario.updateValueAndValidity()
    });
  }

Te dejo un ejemplo funcional aquí.

4
  • Consulta no me funciona el .addValidators y el .removeValidators , dice esto en la sugerencia La propiedad 'addValidators' no existe en el tipo 'AbstractControl' el 30 nov. 2021 a las 14:51
  • Lo estas haciendo como el ejemplo? O como estas accediendo al formControl?. El abstracControl es otra cosa y no contiene las funciones necesarias. Edita tu pregunta con estos datos por favor.
    – Legna
    el 30 nov. 2021 a las 15:15
  • this.itemForm.get('type').valueChanges.subscribe((x) => { if (x === 'Componenent') { this.itemForm.get('name').addValidators(this.validador); } else { //Debe ser la misma referencia para que lo remueva this.itemForm.get('name').removeValidators(this.validador); } this.itemForm.updateValueAndValidity() el 30 nov. 2021 a las 15:37
  • Revisaste este enlace? stackblitz.com/edit/…
    – Legna
    el 30 nov. 2021 a las 18:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.