disable 方法不适用于响应式表单

Question

我试图通过一个条件来禁用复选框，但它没有被禁用。

我强行在 oninit 中插入了该方法，还签入了console.log() 表单，它有status: "DISABLE" 但复选框没有被禁用，如果我在复选框中插入禁用的数据绑定，角度会抱怨，说我使用的是响应式表单，我需要使用 .disabled() 方法。

合同表格组件

 @Component({
      selector: 'app-contract-form',
      template: `
        <app-form [class]="'flex__display align__items__center bg__color__red__light'" [fmGroup]="contractForm">
          <app-input
            (onclick)="onSubmitForm()"
            [class]="'cursor__pointer height__rem__2 width__rem__2 margin__xy__2'"
            [fmGroup]="contractForm"
            [fmControlName]="'termsAndConditions'"
            [type]="'checkbox'"
            [checked]="formValue"
          >
          </app-input>
    
          <app-span>
            Declaro que conheço e concordo com as
            <app-span
              (onclick)="clauseDocumentClick.emit(true)"
              [class]="'cursor__pointer text__color__blue__dark text__decoration__underline'"
            >
              Cláusulas Gerais do Contrato.
            </app-span>
          </app-span>
        </app-form>
      `,
    })
    export class ContractFormComponent implements OnInit {
      contractForm!: FormGroup;
      @Output() submitForm = new EventEmitter<boolean>();
      @Output() clauseDocumentClick = new EventEmitter<boolean>();
      @Input() protected set setDisabledForm(isDisabled: boolean) {
        this.contractForm.controls.termsAndConditions[isDisabled ? 'disable' : 'enable']();
      }
    
      constructor(protected readonly formBuilder: FormBuilder) {
        this.contractForm = formBuilder.group({
          termsAndConditions: formBuilder.control(true, Validators.requiredTrue)
        });
      }
    
      ngOnInit() {
        this.contractForm.disable()
        console.log(this.contractForm)
      }
    
      get formValue(): boolean {
        return this.contractForm.controls.termsAndConditions.value;
      }
    
      onSubmitForm(): void {
        this.contractForm.controls.termsAndConditions.patchValue(!this.formValue);
        this.submitForm.emit(this.formValue);
      }
    }

表单组件

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="fmGroup" [class]="class" [autocomplete]="autocomplete" novalidate>
      <ng-content></ng-content>
    </form>
  `
})
export class FormComponent implements OnInit {
  @Input() fmGroup!: FormGroup;
  @Input() autocomplete = 'on';
  @Input() colectionText: string;

  ngOnInit() {}

}

输入组件

@Component({
  selector: 'app-input',
  template: `
  <input
  (click)="onclick.emit($event)"
  [formControlName]="fmControlName"
  [class]="class"
  [type]="type"
  [placeholder]="placeholder"
  [autocomplete]="autocomplete"
  [minLength]="minlength"
  [maxLength]="maxlength"
  [readonly]="readonly"
  [autofocus]="autofocus"
  [checked]="checked"
  [required]="required"
 >
  `,
})
export class InputComponent implements OnInit {
  @Output() onclick = new EventEmitter<MouseEvent>();
  @Input() fmControlName!: FormControlName;
  @Input() class = '';
  @Input() type = 'text';
  @Input() placeholder = '';
  @Input() autocomplete = 'on';
  @Input() minlength = 1;
  @Input() maxlength = 524288;
  @Input() readonly = false;
  @Input() autofocus = false;
  @Input() checked = false;
  @Input() required = true;

  constructor() {}

  ngOnInit() {}
}

Answer 1

当您在ngOnInit() 中禁用整个表单时，它应该禁用表单内的所有控件，包括复选框。

检查 stackblitz - https://stackblitz.com/edit/angular-reactive-forms

如果您想根据某些条件禁用复选框等特定控件，则可以使用this.contractForm.get('termsAndConditions').disable()