基于不同组件中的复选框的Angular反应形式（表单验证）切换字段

Question

我有一个复杂的表格，其中的字段基于不同组件（父组件）中的切换复选框。我需要验证表单，这意味着某些字段可能被禁用，而某些字段未被禁用。我需要它是动态的，并基于复选框的勾号/取消勾号进行更改，而不是使其仅用于初始化。我已经尝试了多个没有运气的例子。

parent.component.html

<input type="checkbox" id="check" ng-model="checked" (click)='toggleCheckform()'>
<label for="check">Check me</label>

<mat-tab label="child">
   <child [isCheck]="toggleCheck" (messageToEmit)="getMessage($event)"></child>
</mat-tab>
parent.component.ts

export class ParentComponent {

    constructor() { }

    toggleCheck: boolean = false;

    ngOnInit() {
    }

    toggleCheckform() {
        this.toggleCheck = !this.toggleCheck;
    }
}
child.component.ts

export class ChildComponent {

  @Input() isCheck: boolean;

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

  get Field1() { return this.testForm.get('Field1'); }
  get Field2() { return this.testForm.get('Field2'); }

  if(isCheck){
    this.testForm.get('Field1').disable();
  }

  onSubmit() {
    // TODO: Use EventEmitter with form value
    console.warn(this.testForm.value);
  }

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
  }
child.component.html

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

    <div *ngIf="isCheck">
        <div class="form-group">
           <label for="Field1">Field1</label>
                <input type="text" class="form-control" id="Field1" formControlName="Field1">
        </div>
    </div>

    <div class="form-group">
       <label for="Field2">Field2</label>
           <input type="text" class="form-control" id="Field2" formControlName="Field2">
    </div>

    </form>
因此，基于父组件上的复选框，我希望能够启用/禁用该表单字段以进行验证。尝试了许多方法，该示例在初始化表单时起作用，但在初始化之后不起作用。请帮助。

我有一个复杂的表格，其中的字段基于不同组件（父组件）中的切换复选框。我需要验证表单，这意味着某些字段可能被禁用，而某些字段未被禁用。我需要这个...

Answer 1

您需要在输入中使用“ setter”