Come disabilitare un ingresso in angular2

In ts is_edit = trueda disabilitare ...

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

Voglio semplicemente disabilitare un input basato su trueo false.

Ho provato a seguire:

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

Prova a usare attr.disabled, invece didisabled

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

Penso di aver capito il problema, questo campo di input fa parte di un modulo reattivo (?), Dato che hai incluso formControlName. Ciò significa che ciò che stai cercando di fare disabilitando il campo di input con is_editnon funziona, ad esempio il tuo tentativo [disabled]="is_edit", che in altri casi funzionerebbe. Con il tuo modulo devi fare qualcosa del genere:

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

e perdere il is_edittutto.

se vuoi che il campo di input sia disabilitato come predefinito, devi impostare il controllo del modulo come:

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

Ecco un plunker

Potresti semplicemente farlo

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

Se vuoi disabilitare l'input su qualche istruzione. utilizzare [readonly]=trueo falseinvece di disabilitato.

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

Presumo che tu intendessi falseinvece di'false'

Inoltre, [disabled]si aspetta un file Boolean. Dovresti evitare di restituire un file null.

Una nota in risposta al commento di Belter sulla risposta accettata da fedtuck sopra, dal momento che mi manca la reputazione di aggiungere commenti.

Questo non è vero per nessuno dei quali sono a conoscenza, in linea con i documenti di Mozilla

disabilitato è uguale a vero o falso

Quando è presente l'attributo disabled, l'elemento è disabilitato indipendentemente dal valore. Vedi questo esempio

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

Preferisco questa soluzione

Nel file HTML:

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

Nel file TS:

dynamicVariable = false; // true based on your condition 

Quello che stai cercando è disabled = "true" . Ecco un esempio:

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

dimostrazione

make is_editdi tipo 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;
  }
}

Disabilita TextBox in 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>

E anche se la casella / pulsante di immissione deve rimanere disabilitata, allora semplicemente <button disabled>o <input disabled>funziona.

Disabilitato Selectin angolare 9.

una cosa tieni presente che disabilitato funziona con i booleanvalori in questo esempio, sto usando l' (change)evento con l' selectopzione se il paese non è selezionato, la regione sarà disabilitata.

find.component.ts file

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>

può usare semplicemente like

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

L'ho capito in questo modo. quindi preferisco.