วิธีปิดการใช้งานอินพุตในเชิงมุม 2

ในis_edit = trueการปิดการใช้งาน ...

<input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2">

ผมเพียงแค่ต้องการที่จะปิดการใช้งานการป้อนข้อมูลที่อยู่บนพื้นฐานหรือtruefalse

ฉันพยายามทำตาม:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"

ลองใช้attr.disabledแทนdisabled

<input [attr.disabled]="disabled ? '' : null"/>

ฉันคิดว่าฉันคิดออกปัญหาฟิลด์ป้อนข้อมูลนี้เป็นส่วนหนึ่งของรูปแบบปฏิกิริยา (?) formControlNameเนื่องจากคุณได้รวม ซึ่งหมายความว่าสิ่งที่คุณพยายามทำโดยการปิดใช้งานช่องป้อนข้อมูลด้วยis_editนั้นไม่ได้ผลเช่นความพยายามของคุณ[disabled]="is_edit"ซึ่งในกรณีอื่น ๆ จะได้ผล ด้วยแบบฟอร์มของคุณคุณต้องทำสิ่งนี้:

toggle() {
  let control = this.myForm.get('name')
  control.disabled ? control.enable() : control.disable();
}

และสูญเสียis_editทั้งหมด

หากคุณต้องการให้ฟิลด์อินพุตถูกปิดใช้งานเป็นค่าเริ่มต้นคุณต้องตั้งค่าตัวควบคุมฟอร์มเป็น:

name: [{value: '', disabled:true}]

นี่คือนักเลง

คุณสามารถทำได้ง่ายๆ

<input [disabled]="true" id="name" type="text">

หากคุณต้องการให้อินพุตปิดใช้งานในบางคำสั่ง ใช้[readonly]=trueหรือfalseแทนการปิดใช้งาน

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>

<input [disabled]="is_edit" id="name" type="text">
<button (click)="is_edit = !is_edit">Change input state</button>

export class AppComponent {
  is_edit : boolean = false;
}

ฉันคิดว่าคุณหมายถึงfalseแทนที่จะเป็น'false'

นอกจากนี้ยัง[disabled]คาดหวังว่าไฟล์Boolean. คุณควรหลีกเลี่ยงการส่งคืนไฟล์null.

หมายเหตุเพื่อตอบกลับความคิดเห็นของ Belter เกี่ยวกับคำตอบที่ยอมรับของ fedtuckข้างต้นเนื่องจากฉันไม่มีชื่อเสียงในการเพิ่มความคิดเห็น

สิ่งนี้ไม่เป็นความจริงสำหรับสิ่งที่ฉันทราบซึ่งสอดคล้องกับเอกสารของ Mozilla

ปิดใช้งานเท่ากับจริงหรือเท็จ

เมื่อมีแอตทริบิวต์ที่ปิดใช้งานองค์ประกอบจะถูกปิดใช้งานโดยไม่คำนึงถึงค่า ดูตัวอย่างนี้

<input placeholder="i can be changed"/>
<input disabled placeholder="i can NOT be changed"/>
<input disabled="true" placeholder="i can NOT be changed"/>
<input disabled="false" placeholder="i can NOT be changed"/>

ฉันชอบวิธีนี้มากกว่า

ในไฟล์ HTML:

<input [disabled]="dynamicVariable" id="name" type="text">

ในไฟล์ TS:

dynamicVariable = false; // true based on your condition 

สิ่งที่คุณกำลังมองหา= คนพิการ "true" นี่คือตัวอย่าง:

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>

การสาธิต

ทำให้เป็นis_editประเภทบูลีน

<input [disabled]=is_edit id="name" type="text">

export class App {
  name:string;
  is_edit: boolean; 
  constructor() {
    this.name = 'Angular2'
    this.is_edit = true;
  }
}

ปิดการใช้งาน TextBox ใน Angular 7

<div class="center-content tp-spce-hdr">
  <div class="container">
    <div class="row mx-0 mt-4">
      <div class="col-12" style="padding-right: 700px;" >
          <div class="form-group">
              <label>Email</label>
                <input [disabled]="true" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>

และยังถ้ากล่องใส่ปุ่ม / มีจะยังคงปิดการใช้งานแล้วก็ <button disabled>หรือ<input disabled>ผลงาน

ปิดการใช้งานSelectในเชิงมุม 9.

สิ่งหนึ่งที่จำไว้ว่าปิดใช้งานกับbooleanค่าในตัวอย่างนี้ฉันกำลังใช้(change)เหตุการณ์กับselectตัวเลือกหากประเทศไม่ได้เลือกภูมิภาคจะถูกปิดใช้งาน

ไฟล์ find.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-find',
  templateUrl: './find.component.html',
  styleUrls: ['./find.component.css']
})
export class FindComponent implements OnInit {
  isCountrySelected:boolean;

  constructor() { }
  //onchange event disabled false
 onChangeCountry(id:number){
   this.isCountrySelected = false;
 }
  ngOnInit(): void {
    //initially disabled true
    this.isCountrySelected = true;
  }

}

find.component.html

//Country select option
<select  class="form-control"  (change)="onChangeCountry()" value="Choose Country">
                    <option value="">Choose a Country</option>
                    <option value="US">United States</option>
                     
</select>
//region disabled till country is not selected 
<select class="form-control" [disabled]="isCountrySelected">
                    <option value="">Choose a Region</option>
                    <option value="">Any regions.</option>
                    
                </select>

สามารถใช้งานได้ง่ายๆเช่น

     <input [(ngModel)]="model.name" disabled="disabled"

ฉันมีวิธีนี้ ฉันชอบ