typescript - วิธีปิดการใช้งานทุกฟิลด์ในฟอร์มที่ขับเคลื่อนด้วยเทมเพลตใน Angular

ฉันสร้างฟอร์มที่ขับเคลื่อนด้วยเทมเพลตใน Angular 5

ฉันต้องการปิดการใช้งานฟอร์มทั้งหมดในตอนแรก และก็ต้องการให้ฟอร์มสามารถใช้งานได้เมื่อปุ่มบางปุ่มถูกคลิก ดังนั้นฉันจึงเพิ่มคุณสมบัติ disabled ในแท็กฟอร์มและตั้งค่าของมันเป็น false ดังที่แสดงด้านล่าง (ซึ่งวิธีนี้ไม่ได้ผลแม้กระนั้น):

<form #formName = "ngForm" [disabled]="true">
</form>

เนื่องจากคุณสมบัติ disabled ข้างต้นไม่ทำงาน ฉันจึงเปลี่ยนคุณสมบัติ disabled เป็น

[attr.disabled] = true

นี่ก็ไม่ได้ผลเช่นกัน

ตอนนี้เมื่อฉันมีการอ้างอิงถึงองค์ประกอบฟอร์มซึ่งคือ #formName ฉันได้ใช้มันในไฟล์ TS และพยายามเปลี่ยนค่าคุณสมบัติ disabled ภายในวัตถุอ้างอิงนั้น

นี่คือสิ่งที่ฉันได้ทำ

@ViewChild('formName') formName;


this.formName.disabled = true; 

ซึ่งก็ใช้ไม่ได้เช่นกัน และฉันได้รับข้อความแสดงข้อผิดพลาดที่บอกว่าไม่สามารถเปลี่ยนแปลง disabled ได้เพราะมันเป็นเพียง getter

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

ขอบคุณล่วงหน้า :)

คำตอบ #1

ดังที่ได้กล่าวไว้ในความคิดเห็น คุณสามารถห่อฟอร์มไว้ภายในแท็ก fieldset และทำได้ดังนี้:

<form>
    <fieldset [disabled]="fieldsetDisabled">
        <!-- YOUR FIELDS HERE -->
    </fieldset>
</form>

และคุณสามารถจัดการสถานะในคอนโทรลเลอร์ของคุณโดยการสลับตัวแปรท้องถิ่นและระหว่างสถานะ disabled/enabled ดังนี้:

this.fieldsetDisabled = true;  // Disables the fieldset
this.fieldsetDisabled = false; // Enables the fieldset