ฉันได้ลองทำตามตัวอย่างคำตอบอื่น ๆ จากที่นี่แล้ว แต่ก็ไม่สำเร็จ!

ฉันสร้างรูปแบบปฏิกิริยา (เช่นไดนามิก) และฉันต้องการปิดใช้งานบางฟิลด์ในเวลาใดก็ตาม รหัสแบบฟอร์มของฉัน:

this.form = this._fb.group({
  name: ['', Validators.required],
  options: this._fb.array([])
});

const control = <FormArray>this.form.controls['options'];
control.push(this._fb.group({
  value: ['']
}));

html ของฉัน:

<div class='row' formArrayName="options">
  <div *ngFor="let opt of form.controls.options.controls; let i=index">
    <div [formGroupName]="i">
      <select formArrayName="value">
        <option></option>
        <option>{{ opt.controls.value }}</option>
      </select>
    </div>
  </div>
</div>

ฉันลดรหัสเพื่ออำนวยความสะดวก ฉันต้องการปิดการใช้งานฟิลด์ประเภทเลือก ฉันพยายามทำสิ่งต่อไปนี้:

form = new FormGroup({
  first: new FormControl({value: '', disabled: true}, Validators.required),
});

ไม่ทำงาน! ใครมีข้อเสนอแนะ?

name: [{value: '', disabled: true}, Validators.required],
name: [{value: '', disabled: this.isDisabled}, Validators.required],

หรือ

this.form.controls['name'].disable();

ให้ความสนใจ

ถ้าคุณกำลังสร้างรูปแบบที่ใช้ตัวแปรสภาพและพยายามที่จะเปลี่ยนแปลงได้ในภายหลังก็จะไม่ทำงานเช่นรูปแบบจะไม่เปลี่ยนแปลง

ตัวอย่างเช่น

this.isDisabled = true;

this.cardForm = this.fb.group({
    'number': [{value: null, disabled: this.isDisabled},
});

และถ้าคุณเปลี่ยนตัวแปร

this.isDisabled = false;

แบบฟอร์มจะไม่เปลี่ยนแปลง คุณควรใช้

this.cardForm.get ('หมายเลข') ปิดการใช้งาน ();

BTW.

คุณควรใช้วิธี patchValue ในการเปลี่ยนค่า:

this.cardForm.patchValue({
    'number': '1703'
});

การใช้ปิดการใช้งานใน DOM ด้วยรูปแบบปฏิกิริยาเป็นวิธีปฏิบัติที่ไม่ดี คุณสามารถตั้งค่าตัวเลือกนี้ในของคุณFormControlเมื่อคุณ init จาก

username: new FormControl(
  {
    value: this.modelUser.Email,
    disabled: true
  },
  [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(99)
  ]
);

ทรัพย์สินvalueไม่จำเป็น

หรือคุณสามารถควบคุมฟอร์มของคุณด้วยget('control_name')และตั้งค่าdisable

this.userForm.get('username').disable();

ฉันแก้ไขได้โดยการห่อวัตถุอินพุตด้วยเลเบลในชุดฟิลด์: fieldset ควรมีคุณสมบัติที่ปิดใช้งานผูกกับบูลีน

 <fieldset [disabled]="isAnonymous">
    <label class="control-label" for="firstName">FirstName</label>
    <input class="form-control" id="firstName" type="text" formControlName="firstName" />
 </fieldset>

disablingFormControl มันที่จะนำเสนอในรูปแบบในขณะที่prevents savingคุณสามารถตั้งค่าreadonlyคุณสมบัตินี้ได้

และคุณสามารถบรรลุได้ด้วยวิธีนี้:

HTML:

<select formArrayName="value" [readonly] = "disableSelect">

TS:

this.disbaleSelect = true;

พบสิ่งนี้ที่นี่

หากจะใช้disabledองค์ประกอบการป้อนข้อมูลแบบฟอร์ม (เช่นที่แนะนำในคำตอบที่ถูกต้องวิธีปิดการใช้งานอินพุต ) การตรวจสอบความถูกต้องสำหรับองค์ประกอบ เหล่านี้จะถูกปิดใช้งานด้วยโปรดใส่ใจในเรื่องนั้น!

(และถ้าคุณใช้บนปุ่มส่งเหมือน[disabled]="!form.valid"จะยกเว้นฟิลด์ของคุณจากการตรวจสอบความถูกต้อง)

วิธีการทั่วไปจะเป็น

// Variable/Flag declare
public formDisabled = false;

// Form init
this.form = new FormGroup({
  name: new FormControl({value: '', disabled: this.formDisabled}, 
    Validators.required),
 });

// Enable/disable form control
public toggleFormState() {
    this.formDisabled = !this.formDisabled;
    const state = this.formDisabled ? 'disable' : 'enable';

    Object.keys(this.form.controls).forEach((controlName) => {
        this.form.controls[controlName][state](); // disables/enables each form control based on 'this.formDisabled'
    });
}

หากคุณต้องการปิดการใช้งานfirst(formcontrol) คุณสามารถใช้คำสั่งด้านล่าง

this.form.first.disable();

สิ่งนี้ใช้ได้ผลสำหรับฉัน: this.form.get('first').disable({onlySelf: true});

this.form.enable()
this.form.disable()

หรือ formcontrol 'ก่อน'

this.form.get('first').enable()
this.form.get('first').disable()

คุณสามารถตั้งค่าปิดใช้งานหรือเปิดใช้งานในชุดเริ่มต้น

 first: new FormControl({disabled: true}, Validators.required)

lastName: new FormControl({value: '', disabled: true}, Validators.compose([Validators.required])),

ทางออกที่ดีที่สุดอยู่ที่นี่:

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

โครงร่างการแก้ปัญหา (ในกรณีที่ลิงค์เสีย):

(1) สร้างคำสั่ง

import { NgControl } from '@angular/forms';

@Directive({selector: '[disableControl]'})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {}
}

(2) ใช้แบบนั้น

<input [formControl]="formControl" [disableControl]="condition">

(3) เนื่องจากอินพุตที่ปิดใช้งานไม่แสดงในรูปแบบมูลค่าในการส่งคุณอาจต้องใช้สิ่งต่อไปนี้แทน (หากจำเป็น):

onSubmit(form) {
  const formValue = form.getRawValue() // gets form.value including disabled controls
  console.log(formValue)
}

ฉันมีปัญหาเดียวกัน แต่การเรียก this.form.controls ['name']. disable () ไม่ได้รับการแก้ไขเพราะฉันกำลังโหลดมุมมองของฉันใหม่ (โดยใช้ router.navigate ())

ในกรณีของฉันฉันต้องรีเซ็ตแบบฟอร์มก่อนที่จะโหลดใหม่:

this.form = ไม่ได้กำหนด; this.router.navigate ([เส้นทาง]);

setTimeout(() => { emailGroup.disable(); });

คุณสามารถประกาศฟังก์ชันเพื่อเปิด / ปิดการใช้งานการควบคุมฟอร์มทั้งหมด:

  toggleDisableFormControl(value: Boolean, exclude = []) {
    const state = value ? 'disable' : 'enable';
    Object.keys(this.profileForm.controls).forEach((controlName) => {
      if (!exclude.includes(controlName))
        this.profileForm.controls[controlName][state]();
    });
  }

และใช้แบบนี้

this.toggleDisableFormControl(true, ['email']);
// disbale all field but email

เพื่อให้เป็นสนามปิดการใช้งานและเปิดใช้งานของเชิงมุมรูปแบบปฏิกิริยา 2+

1. เพื่อปิดการใช้งาน

• เพิ่ม[attr.disabled] = "true"ลงในอินพุต

<input class="form-control" name="Firstname" formControlName="firstname" [attr.disabled]="true">

การเปิดใช้งาน

export class InformationSectionComponent {
formname = this.formbuilder.group({
firstname: ['']
});
}

เปิดใช้งานแบบฟอร์มทั้งหมด

this.formname.enable();

เปิดใช้งานฟิลด์เฉพาะเพียงอย่างเดียว

this.formname.controls.firstname.enable();

เหมือนกันสำหรับปิดใช้งานแทนที่ enable () ด้วยปิดการใช้งาน ()

ใช้งานได้ดี แสดงความคิดเห็นสำหรับคำถาม