根据另一个 Angular 的值验证字段答案

【问题标题】：Validate field depending on the value of another Angular根据另一个 Angular 的值验证字段
【发布时间】：2017-10-02 03:58:49
【问题描述】：

请求您合作，说明我如何验证取决于单选按钮上选择的值的文本字段；实际上，我需要的是仅在选择选项 4 时才激活观察字段，但表单将其显示为无效。

当我选择选项四时，它告诉我字段 observacionA 是必需的，但是当我填写它时，表格如下无效

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

【问题讨论】：

你能把它放在 plnkr 或 stackblitz 中吗？
好的，你已经可以看到我的应用程序的演示了@brijmcq

标签： javascript forms angular

【解决方案1】：

当验证器有效时，您应该返回 null 而不是对象：

{
  return: null
}

应该是：

if(observacionA){
  return null;

还有一点：

<button [disabled]="valido()"
                          ^^^
                     add this because it's method

Stackblitz example

【讨论】：

如何在 observacionA @yurzui 的字段中添加验证

【解决方案2】：

可能还有很多其他的解决方案，但我认为这是最简单的一个。

HTML：

<md-radio-group formControlName="opcionA" required >
   <md-radio-button *ngFor="let opcion of opciones" (change)="validField=opcion.valor" [value]="opcion.valor" >
                    {{opcion.nombre}}
   </md-radio-button>
</md-radio-group>
<md-form-field *ngIf="(validField==4) ? true : false">
    <textarea mdInput
          formControlName="observacionA"
          [errorStateMatcher]="myErrorStateMatcher"
          >
    </textarea>
<md-error>{{ msgError }}</md-error>

打字稿：

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

validField:number; //declared variable for html
constructor (public fb: FormBuilder) { }
...

希望对你有所帮助。

【讨论】：