禁用/启用使用反应形式的验证选中或取消选中复选框时的输入字段ANGULAR 8 [英] disable/enable input filed when checkbox is checked or unchecked using validations in reactive forms ANGULAR 8

问题描述

最初的姓氏和选项复选框被取消.我想在选中AllOW复选框时启用姓氏和选项复选框.我正在尝试为其编写自定义验证，或者是否有其他方法可以使用表单控件名称
模板

Initally last name and options checkboxes are disbaled. I want to enable last name and options checkboxes when the AllOW checkbox is checked.I am trying to write a custom validation for it, or is there any other way to do it using the form control name
Template

<form [formGroup]="empForm" (ngSubmit)="onSubmit()">

    <div formArrayName="employees" >

        <div *ngFor="let employee of employees().controls; let empIndex=index">

            <div [formGroupName]="empIndex" style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;">
                {{empIndex}}
                First Name :
                <input type="text" formControlName="firstName">
        <label class="checkbox-inline">
                      <input type="checkbox" />ALLOW</label
                    >
                <div>

                     Last Name:
                <input type="text" formControlName="lastName">
                    <label class="checkbox-inline"  *ngFor="let day of 
                       days; ">
                        <input
                          type="checkbox"
                          formControlName="{{ day.name }}"
                          name="{{ day.name }}"
                           (change)="onChange(empIndex,day.value , 
                        $event.target.checked)"
                        />{{ day.value }}
                      </label>
                </div>
                <button 
                 (click)="removeEmployee(empIndex)">Remove</button>


                <div formArrayName="skills">

                    <div *ngFor="let skill of 
                      employeeSkills(empIndex).controls; let 
                          skillIndex=index">



                        <div [formGroupName]="skillIndex">
                            {{skillIndex}}
                    Skill :
                    <select  formControlName="skill" id="skill">
                     <option>JAVA</option>
                     <option>Python</option>
                     <option>C#</option>
                    </select>
                     Exp:
                    <select  formControlName="exp" id="exp">
                     <option>1</option>
                     <option>2</option>
                     <option>3</option>
                   </select>


                <button
                   (click)="removeEmployeeSkill(empIndex,skillIndex)">
                Remove</button>

                            <pre>{{skillIndex.value |json}}</pre>
                        </div>

                    </div>
                    <button type="button" 
                   (click)="addEmployeeSkill(empIndex)">Add Skill
                   </button>
                </div>
              </div>
          </div>
    </div>

    <p>
        <button type="submit">Submit</button>
    </p>

</form>

https://stackblitz.com/edit/angular-pg1t9r

推荐答案

我扩展了对使用指令的评论(请参阅

I extended my comment of using a directive (see this SO) because is a few complex to response in a comment.

如果我们声明一个变量

checkList:boolean[]=[]

并使用[(ngModel)]，-我们需要使用[ngModelOptions] ="{standalone:true}"

And use [(ngModel)], -we need use [ngModelOptions]="{standalone:true}"

<input type="checkbox" 
   [(ngModel)]="checkList[empIndex]" 
   [ngModelOptions]="{standalone:true}"/>

我们简单地使用

  <input type="text" formControlName="lastName" 
    [enableControl]="checkList[empIndex]">

您可以在分叉的stackblitz

已更新，只需简单地禁用按钮已提交"即可

Updated the button "submited" can be disabled using simply

<button [disabled]="!empForm.valid" type="submit">Submit</button> //(*)

但是，当然，当我们创建表单时，我们需要使用验证器

But, of course, when we create the form we need use validators

  newEmployee(): FormGroup {
    return this.fb.group({
      firstName: ["",Validators.required],
      lastName: [{value:'', disabled:true},Validators.required],
      option1: [{value:false, disabled:true}],
      option2: [{value:false, disabled:true}],
      option3: [{value:false, disabled:true}],
      skills: this.fb.array([]),
      options: this.fb.array([])
    });
  }

(*)如果需要数组中的某些元素，则需要使用

(*)If we need that there are some elements in array, we need use

    <button [disabled]="!empForm.valid || !employees.length" 
          type="submit">Submit</button>

这篇关于禁用/启用使用反应形式的验证选中或取消选中复选框时的输入字段ANGULAR 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！