Skip to main content
se añadieron 461 caracteres en el cuerpo
Origen Enlace
Gdaimon
  • 760
  • 1
  • 14
  • 35

Class

export class AppComponent {

  testForm: FormGroup;
  msgError: string = 'Este Campo es obligatorio';

  opciones = [
    { nombre: 'A''N1', valor: 1 },
    { nombre: 'B''N2', valor: 2 },
    { nombre: 'C''N3', valor: 3 },
    { nombre: 'Otra Respuesta', valor: 4 },
  ];
 

constructor  constructor(public fb: FormBuilder) {

    this.testForm = this.fb.group ( {
      'opcionA': [['', ''[Validators.required]], 
 [ Validators.required ] ],
  'observacionA': [new ''FormControl(null)
    }, [{
 Validators.required ] ]     validator: this.specificValue
  }    });
  }

valido  valido(): boolean {
      return !this.testForm.valid;
}

Html

<form [formGroup]="testForm" }

 (ngSubmit)="()" novalidate>

<md-radio-specificValue(group: formControlName="opcionA"
any) {
    if (!group.controls.opcionA || !group.controls.opcionA.value) return;

    const opcionA = requiredgroup.controls.opcionA.value;
     let observacionA = group.controls.observacionA.value;
    if (opcionA == '4') >{
   <md-radio-button *ngFor="let opcion ofif opciones"(observacionA) {
        return {
          return: [value]="opcion.valor"null
          };
      } else >{
        return {
          isRequired: {{opcion.nombre}}true
   </md-radio-button>
   <div *ngIf="testForm.get('opcionA').invalid"> };
      }
  <md-error>{{ msgError }}</md-error>
   </div>}
</md-radio-group>
<md-form-field *ngIf="testForm.value.opcionA ===guardar() 4">{
    <textarea mdInputconsole.log(this.testForm.value);
     }

}

Html

<h1>Form</h1>

<form [formGroup]="testForm" (ngSubmit)="guardar()" novalidate>
  <label *ngFor="let opcion of formControlName="observacionA"opciones">
  <input type="radio"  
        formControlName="opcionA"
  [errorStateMatcher]="myErrorStateMatcher"
      required
        >[value]="opcion.valor">{{opcion.nombre}}
 </label>
  <div </textarea>*ngIf="testForm.get('opcionA').invalid">
    <md-error>{{ msgError }}</md-error>
  </md-form-field>div>
 <button md-raised-button<div class="mt-1"*ngIf="testForm.value.opcionA === 4">
    <textarea formControlName="observacionA"></textarea>
    color="primary"
<div *ngIf="testForm.get('observacionA').invalid">
      {{ msgError type="submit"}}
    </div>
  </div>
<br>
<hr>
  <button [disabled]="valido"
 >
  Guardar
 <md-icon class="example-icon">save</md-icon>     type="submit">
  Save
</button>
</form> 

{{testForm.valid}}

Demo in stackblitzDemo in stackblitz

testForm: FormGroup;
 opciones = [
  { nombre: 'A', valor: 1 },
  { nombre: 'B', valor: 2 },
  { nombre: 'C', valor: 3 },
  { nombre: 'Otra Respuesta', valor: 4 },
 ];
 

constructor (public fb: FormBuilder) {

this.testForm = this.fb.group ( {
  'opcionA': [ '', [ Validators.required ] ],
  'observacionA': [ '', [ Validators.required ] ]
  } );
}

valido (): boolean {
      return !this.testForm.valid;
}

Html

<form [formGroup]="testForm" 
 (ngSubmit)="()" novalidate>

<md-radio-group formControlName="opcionA"
                required
                >
   <md-radio-button *ngFor="let opcion of opciones"
                    [value]="opcion.valor"
                  >
                    {{opcion.nombre}}
   </md-radio-button>
   <div *ngIf="testForm.get('opcionA').invalid">
        <md-error>{{ msgError }}</md-error>
   </div>
</md-radio-group>
<md-form-field *ngIf="testForm.value.opcionA === 4">
    <textarea mdInput
              formControlName="observacionA"
              [errorStateMatcher]="myErrorStateMatcher"
              >
    </textarea>
    <md-error>{{ msgError }}</md-error>
 </md-form-field>
 <button md-raised-button class="mt-1"
         color="primary"
         type="submit"
         [disabled]="valido"
 >
  Guardar
 <md-icon class="example-icon">save</md-icon>
 </button>
</form>

Demo in stackblitz

Class

export class AppComponent {

  testForm: FormGroup;
  msgError: string = 'Este Campo es obligatorio';

  opciones = [
    { nombre: 'N1', valor: 1 },
    { nombre: 'N2', valor: 2 },
    { nombre: 'N3', valor: 3 },
    { nombre: 'Otra Respuesta', valor: 4 },
  ];

  constructor(public fb: FormBuilder) {

    this.testForm = this.fb.group({
      'opcionA': ['', [Validators.required]], 
      'observacionA': new FormControl(null)
    }, {
        validator: this.specificValue
      });
  }

  valido(): boolean {
    return !this.testForm.valid;
  }

  specificValue(group: any) {
    if (!group.controls.opcionA || !group.controls.opcionA.value) return;

    const opcionA = group.controls.opcionA.value;
    let observacionA = group.controls.observacionA.value;
    if (opcionA == '4') {
      if (observacionA) {
        return {
          return: null
        };
      } else {
        return {
          isRequired: true
        };
      }
    }
  }

  guardar() {
    console.log(this.testForm.value);
  }

}

Html

<h1>Form</h1>

<form [formGroup]="testForm" (ngSubmit)="guardar()" novalidate>
  <label *ngFor="let opcion of opciones">
  <input type="radio"  
        formControlName="opcionA"
        required
        [value]="opcion.valor">{{opcion.nombre}}
</label>
  <div *ngIf="testForm.get('opcionA').invalid">
    {{ msgError }}
  </div>
  <div *ngIf="testForm.value.opcionA === 4">
    <textarea formControlName="observacionA"></textarea>
    <div *ngIf="testForm.get('observacionA').invalid">
      {{ msgError }}
    </div>
  </div>
<br>
<hr>
  <button [disabled]="valido"
          type="submit">
  Save
</button>
</form> 

{{testForm.valid}}

Demo in stackblitz

se añadieron 115 caracteres en el cuerpo
Origen Enlace
Gdaimon
  • 760
  • 1
  • 14
  • 35

solicito de su colaboración para que me indique como puedo validar un campo de texto que depende del valor seleccionado en un Radio button; realmente lo que necesito es activar el campo observaciones solamente si se selecciona la opcion 4, pero el formulario lo muetra como invalido.

Class

testForm: FormGroup;
 opciones = [
  { nombre: 'A', valor: 1 },
  { nombre: 'B', valor: 2 },
  { nombre: 'C', valor: 3 },
  { nombre: 'Otra Respuesta', valor: 4 },
 ];


constructor (public fb: FormBuilder) {

this.testForm = this.fb.group ( {
  'opcionA': [ '', [ Validators.required ] ],
  'observacionA': [ '', [ Validators.required ] ]
  } );
}

valido (): boolean {
      return !this.testForm.valid;
}

Html

<form [formGroup]="testForm" 
 (ngSubmit)="()" novalidate>

<md-radio-group formControlName="opcionA"
                required
                >
   <md-radio-button *ngFor="let opcion of opciones"
                    [value]="opcion.valor"
                  >
                    {{opcion.nombre}}
   </md-radio-button>
   <div *ngIf="testForm.get('opcionA').invalid">
        <md-error>{{ msgError }}</md-error>
   </div>
</md-radio-group>
<md-form-field *ngIf="testForm.value.opcionA === 4">
    <textarea mdInput
              formControlName="observacionA"
              [errorStateMatcher]="myErrorStateMatcher"
              >
    </textarea>
    <md-error>{{ msgError }}</md-error>
 </md-form-field>
 <button md-raised-button class="mt-1"
         color="primary"
         type="submit"
         [disabled]="valido"
 >
  Guardar
 <md-icon class="example-icon">save</md-icon>
 </button>
</form>

Demo in stackblitz

solicito de su colaboración para que me indique como puedo validar un campo de texto que depende del valor seleccionado en un Radio button; realmente lo que necesito es activar el campo observaciones solamente si se selecciona la opcion 4, pero el formulario lo muetra como invalido.

Class

testForm: FormGroup;
 opciones = [
  { nombre: 'A', valor: 1 },
  { nombre: 'B', valor: 2 },
  { nombre: 'C', valor: 3 },
  { nombre: 'Otra Respuesta', valor: 4 },
 ];


constructor (public fb: FormBuilder) {

this.testForm = this.fb.group ( {
  'opcionA': [ '', [ Validators.required ] ],
  'observacionA': [ '', [ Validators.required ] ]
  } );
}

valido (): boolean {
      return !this.testForm.valid;
}

Html

<form [formGroup]="testForm" 
 (ngSubmit)="()" novalidate>

<md-radio-group formControlName="opcionA"
                required
                >
   <md-radio-button *ngFor="let opcion of opciones"
                    [value]="opcion.valor"
                  >
                    {{opcion.nombre}}
   </md-radio-button>
   <div *ngIf="testForm.get('opcionA').invalid">
        <md-error>{{ msgError }}</md-error>
   </div>
</md-radio-group>
<md-form-field *ngIf="testForm.value.opcionA === 4">
    <textarea mdInput
              formControlName="observacionA"
              [errorStateMatcher]="myErrorStateMatcher"
              >
    </textarea>
    <md-error>{{ msgError }}</md-error>
 </md-form-field>
 <button md-raised-button class="mt-1"
         color="primary"
         type="submit"
         [disabled]="valido"
 >
  Guardar
 <md-icon class="example-icon">save</md-icon>
 </button>
</form>

solicito de su colaboración para que me indique como puedo validar un campo de texto que depende del valor seleccionado en un Radio button; realmente lo que necesito es activar el campo observaciones solamente si se selecciona la opcion 4, pero el formulario lo muetra como invalido.

Class

testForm: FormGroup;
 opciones = [
  { nombre: 'A', valor: 1 },
  { nombre: 'B', valor: 2 },
  { nombre: 'C', valor: 3 },
  { nombre: 'Otra Respuesta', valor: 4 },
 ];


constructor (public fb: FormBuilder) {

this.testForm = this.fb.group ( {
  'opcionA': [ '', [ Validators.required ] ],
  'observacionA': [ '', [ Validators.required ] ]
  } );
}

valido (): boolean {
      return !this.testForm.valid;
}

Html

<form [formGroup]="testForm" 
 (ngSubmit)="()" novalidate>

<md-radio-group formControlName="opcionA"
                required
                >
   <md-radio-button *ngFor="let opcion of opciones"
                    [value]="opcion.valor"
                  >
                    {{opcion.nombre}}
   </md-radio-button>
   <div *ngIf="testForm.get('opcionA').invalid">
        <md-error>{{ msgError }}</md-error>
   </div>
</md-radio-group>
<md-form-field *ngIf="testForm.value.opcionA === 4">
    <textarea mdInput
              formControlName="observacionA"
              [errorStateMatcher]="myErrorStateMatcher"
              >
    </textarea>
    <md-error>{{ msgError }}</md-error>
 </md-form-field>
 <button md-raised-button class="mt-1"
         color="primary"
         type="submit"
         [disabled]="valido"
 >
  Guardar
 <md-icon class="example-icon">save</md-icon>
 </button>
</form>

Demo in stackblitz

Origen Enlace
Gdaimon
  • 760
  • 1
  • 14
  • 35

Validar campo dependiendo del valor de otro Angular

solicito de su colaboración para que me indique como puedo validar un campo de texto que depende del valor seleccionado en un Radio button; realmente lo que necesito es activar el campo observaciones solamente si se selecciona la opcion 4, pero el formulario lo muetra como invalido.

Class

testForm: FormGroup;
 opciones = [
  { nombre: 'A', valor: 1 },
  { nombre: 'B', valor: 2 },
  { nombre: 'C', valor: 3 },
  { nombre: 'Otra Respuesta', valor: 4 },
 ];


constructor (public fb: FormBuilder) {

this.testForm = this.fb.group ( {
  'opcionA': [ '', [ Validators.required ] ],
  'observacionA': [ '', [ Validators.required ] ]
  } );
}

valido (): boolean {
      return !this.testForm.valid;
}

Html

<form [formGroup]="testForm" 
 (ngSubmit)="()" novalidate>

<md-radio-group formControlName="opcionA"
                required
                >
   <md-radio-button *ngFor="let opcion of opciones"
                    [value]="opcion.valor"
                  >
                    {{opcion.nombre}}
   </md-radio-button>
   <div *ngIf="testForm.get('opcionA').invalid">
        <md-error>{{ msgError }}</md-error>
   </div>
</md-radio-group>
<md-form-field *ngIf="testForm.value.opcionA === 4">
    <textarea mdInput
              formControlName="observacionA"
              [errorStateMatcher]="myErrorStateMatcher"
              >
    </textarea>
    <md-error>{{ msgError }}</md-error>
 </md-form-field>
 <button md-raised-button class="mt-1"
         color="primary"
         type="submit"
         [disabled]="valido"
 >
  Guardar
 <md-icon class="example-icon">save</md-icon>
 </button>
</form>