Cách tắt đầu vào trong angle2

Trong ts is_edit = trueđể vô hiệu hóa ...

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

Tôi chỉ đơn giản muốn vô hiệu hóa đầu vào dựa trên truehoặc false.

Tôi đã thử làm theo:

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

Hãy thử sử dụng attr.disabled, thay vìdisabled

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

Tôi nghĩ rằng tôi đã tìm ra vấn đề, trường đầu vào này là một phần của biểu mẫu phản ứng (?), Vì bạn đã bao gồm formControlName . Điều này có nghĩa là những gì bạn đang cố gắng thực hiện bằng cách tắt trường nhập bằng is_editkhông hoạt động, ví dụ như nỗ lực của bạn [disabled]="is_edit", trong các trường hợp khác sẽ hoạt động. Với biểu mẫu của bạn, bạn cần làm như sau:

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

và mất is_edithoàn toàn.

nếu bạn muốn trường nhập liệu bị tắt theo mặc định, bạn cần đặt điều khiển biểu mẫu là:

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

Đây là một plunker

Bạn chỉ có thể làm điều này

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

Nếu bạn muốn vô hiệu hóa đầu vào trên một số câu lệnh. sử dụng [readonly]=truehoặc falsethay vì bị vô hiệu hóa.

<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;
}

Tôi đoán bạn có ý falsethay vì'false'

Ngoài ra, [disabled]đang mong đợi a Boolean. Bạn nên tránh trả lại a null.

Một ghi chú phản hồi nhận xét của Belter về câu trả lời được chấp nhận của fedtuck ở trên, vì tôi không có uy tín để thêm nhận xét.

Điều này không đúng với bất kỳ điều gì tôi biết, theo tài liệu của Mozilla

bị vô hiệu hóa bằng đúng hoặc sai

Khi thuộc tính bị vô hiệu hóa hiện diện, phần tử bị vô hiệu hóa bất kể giá trị. Xem ví dụ này

<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"/>

Tôi thích giải pháp này hơn

Trong tệp HTML:

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

Trong tệp TS:

dynamicVariable = false; // true based on your condition 

Những gì bạn đang tìm kiếm bị vô hiệu hóa = "true" . Đây là một ví dụ:

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

Bản giới thiệu

làm is_editbằng kiểu boolean.

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

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

Tắt TextBox trong 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>

Và cũng có thể nếu hộp / nút đầu vào vẫn bị vô hiệu hóa, thì đơn giản <button disabled>hoặc <input disabled>hoạt động.

Đã tắt Selectở góc 9.

một điều hãy nhớ rằng công việc bị vô hiệu hóa với booleancác giá trị trong ví dụ này, tôi đang sử dụng (change)sự kiện với selecttùy chọn nếu quốc gia không được chọn, khu vực sẽ bị vô hiệu hóa.

tệp 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>

có thể sử dụng đơn giản như

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

Tôi đã hiểu nó như thế này. vì vậy tôi thích hơn.