Angular2'de bir giriş nasıl devre dışı bırakılır

Devre is_edit = truedışı bırakılacak ...

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

Sadece trueveya temelli bir girişi devre dışı bırakmak istiyorum false.

Aşağıdakileri denedim:

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

attr.disabledBunun yerine kullanmayı deneyindisabled

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

Sanırım sorunu çözdüm, bu girdi alanı reaktif bir formun (?) Parçası, çünkü siz dahil ettiniz formControlName. Bu, ile giriş alanını devre dışı bırakarak yapmaya çalıştığınız şeyin çalışmadığı anlamına gelir is_edit, örneğin, [disabled]="is_edit"başka durumlarda işe yarayacak olan girişiminiz . Formunuzla bunun gibi bir şey yapmanız gerekiyor:

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

ve is_edittamamen kaybedersiniz .

giriş alanının varsayılan olarak devre dışı bırakılmasını istiyorsanız, form denetimini şu şekilde ayarlamanız gerekir:

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

İşte bir dalgıç

Bunu basitçe yapabilirsin

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

Bazı ifadelerde girişin devre dışı bırakılmasını istiyorsanız. kullanmak [readonly]=trueveya falseyerine engelli.

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

Bunun falseyerine demek istediğini varsayıyorum'false'

Ayrıca, [disabled]bir Boolean. A döndürmekten kaçınmalısınız null.

Belter'in fedtuck'ın yukarıdaki kabul edilen cevabı hakkındaki yorumuna cevaben bir not , çünkü yorum ekleme itibarım yok.

Bu Mozilla belgelerine uygun olarak bildiğim hiçbiri için doğru değil

devre dışı, doğru veya yanlışa eşittir

Devre dışı bırakılmış öznitelik mevcut olduğunda öğe, değerine bakılmaksızın devre dışı bırakılır. Bu örneğe bakın

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

Bu çözümü tercih ederim

HTML dosyasında:

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

TS dosyasında:

dynamicVariable = false; // true based on your condition 

Aradığınız şey devre dışı = "doğru" . İşte bir örnek:

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

gösteri

is_editboole türü yapmak .

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

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

Angular 7'de TextBox'ı devre dışı bırakın

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

Ayrıca giriş kutusu / düğmesinin devre dışı kalması gerekiyorsa, o zaman basitçe <button disabled>veya <input disabled>çalışır.

Devre dışı Selectaçısal 9'da.

Unutmayın ki booleanbu örnekte değerlerle çalışmayı devre dışı bırakarak , ülke seçilmezse seçeneği (change)ile olayı kullanıyorum selectbölge devre dışı bırakılacaktır.

find.component.ts dosyası

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>

basitçe kullanabilir

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

Ben böyle anladım. bu yüzden tercih ederim.