angular2의 입력을 비활성화하는 방법

angular2의 입력을 비활성화하는 방법

인츠is_edit = true사용 안 함...

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

나는 단지 다음을 기준으로 입력을 비활성화하고 싶을 뿐입니다.true또는false.

다음을 시도했습니다.

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

사용해 보십시오.attr.disabled대신에disabled

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

일부 문에서 입력을 비활성화하려는 경우.사용하다[readonly]=true또는false장애인 대신에

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

문제를 파악한 것 같습니다. 이 입력 필드는 반응형(?)의 일부입니다. 다음을 포함했기 때문입니다.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">

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

이 솔루션이 더 좋습니다.

HTML 파일:

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

TS 파일:

dynamicVariable = false; // true based on your condition 

위의 Fedtuck의 수락된 답변에 대한 Belter의 코멘트에 대한 답변으로, 저는 코멘트를 추가할 수 있는 평판이 부족하기 때문입니다.

이것은 Mozilla 문서에 따라 내가 알고 있는 어떤 것에도 해당되지 않습니다.

사용 안 함은 true 또는 false와 같습니다.

비활성화된 특성이 있으면 값에 관계없이 요소가 비활성화됩니다.이 예 참조

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

실제로 반응형을 사용할 때('체크 후 변경' 오류를 방지하기 위해) 현재 권장되는 접근 방식은 비활성화된 특성을 반응형 지시어와 함께 사용하지 않는 것입니다.설정해야 합니다.disabled구성 요소 클래스에 있는 이 컨트롤의 속성과 비활성화된 속성이 실제로 DOM에 설정됩니다.

<div>
      <form [formGroup]="form">
    <p>
        <input matInput type="text" placeholder="Name" formControlName="name"/>
    </p>
    </form>
</div>

및 구성 요소 코드:

form: FormGroup;
  public is_edit: boolean = true;
  constructor(
    private fb: FormBuilder
    ) {
    
  }

  ngOnInit() {
    this.form = this.fb.group({
      name: [{value: '', disabled: !this.is_edit}, [Validators.required, Validators.minLength(2)]],
    });
  }

다음은 작동 코드가 있는 플런커입니다. http://plnkr.co/edit/SQjxKBfvvUk2uAIb?preview

데모

만들다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;
  }
}

찾고 있는 내용이 비활성화되었습니다="true".다음은 예입니다.

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

---

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>

사용 안 함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.sys

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

또한 입력 상자/버튼을 사용할 수 없는 상태로 유지해야 하는 경우에는 간단히<button disabled>또는<input disabled>작동하다.

처럼 간단하게 사용할 수 있습니다.

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

이렇게 받았으니까 더 좋아요.

언급URL : https://stackoverflow.com/questions/42179150/how-to-disable-a-input-in-angular2