IT story

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

hot-time 2020. 9. 12. 11:31
반응형

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


is_edit = true비활성화하려면 ts 에서 ...

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

나는 문제를 알아 냈다고 생각합니다.이 입력 필드는을 포함했기 때문에 반응 양식 (?)의 일부입니다 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]="isDisabled()" id="name" type="text">

export class AppComponent {
  name:string;
  is_edit : boolean = false;


 isDisabled() : boolean{
   return this.is_edit;
 }
}

나는 당신이 false대신에 의미했다고 생각합니다'false'

또한, [disabled]을 기대하고있다 Boolean. 당신은 반환하지 않도록해야합니다 null.


찾고있는 것은 disabled = "true" 입니다. 다음은 예입니다.

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

의 fedtuck의 수락 된 답변 에 대한 Belter의 의견에 대한 답변 입니다. 댓글을 추가 할 평판이 부족하기 때문입니다.

Mozilla 문서 와 관련하여 내가 아는 어떤 것도 사실이 아닙니다.

disabled는 true 또는 false와 같습니다.

disabled 속성이 있으면 값에 관계없이 요소가 비활성화됩니다. 이 예 보기

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


Angular 7에서 TextBox 비활성화

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


이 솔루션을 선호합니다

HTML 파일에서 :

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

TS 파일에서 :

dynamicVariable = false; // true based on your condition 

데모

make is_edit of type 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;
  }
}

And also if the input box/button has to remain disable, then simply <button disabled> or <input disabled> works.


can use simply like

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

I got it like this way. so i prefer.

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

반응형