如何禁用angular2中的输入

时间:2017-02-11 17:48:30

标签: angular angular-reactive-forms disabled-input

在ts is_edit = true中禁用...

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

我只是想根据truefalse停用输入。

我试过以下:

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

15 个答案:

答案 0 :(得分:206)

尝试使用attr.disabled,而不是disabled

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

答案 1 :(得分:30)

我想我发现了问题,这个输入字段是被动形式(?)的一部分,因为你已经包含了public class aSolver { public double[] dbls; public int lwa; public int n; public int info; public int rc; private int xoffset, foffset; public aSolver() { n = 2; lwa = (n*(3 * n + 13)/2 + 1); dbls = new double[2 * n + lwa]; info = 0; dbls[0] = 0; dbls[1] = 1; rc = 0; solveStep(0, 1); } public void setOffsets(int xv, int fv ) { xoffset = xv; foffset = fv; } public void setf(int p, double val){ dbls[foffset + p] = val; } public double x(int p){ return dbls[xoffset + p]; } public void solveStep(int xv, int fv ) { setOffsets(xv, fv); setf(0, 2.0 * x(0) + 3.0 * x(1) + 6.0); setf(1, 5.0 * x(0) - 3.0 * x(1) - 27.0); rc++; } } 。这意味着您通过使用formControlName禁用输入字段而尝试执行的操作无效,例如您的尝试is_edit,这在其他情况下可以正常工作。使用您的表单,您需要执行以下操作:

[disabled]="is_edit"

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

如果您希望默认禁用输入字段,则需要将表单控件设置为:

is_edit

这是 plunker

答案 2 :(得分:21)

你可以这么做

[2018-03-08T08:06:29.390Z] INFO  [32014] - [Application update app-f8f2d-180308_133451@78/AppDeployStage0/EbExtensionPreBuild/Infra-EmbeddedPreBuild/prebuild_1_FranchiseSoft/Command 06-pecl] : Completed activity. Result:
  PHP Warning:  Module 'imap' already loaded in Unknown on line 0
  /bin/sh: line 0: [: 3.1.2: binary operator expected

答案 3 :(得分:11)

start.on('click', function() {
  var piano = $('.piano');
  piano.each(function(index) {
    var _this = $(this);
    _this.addClass('press');
    setTimeout(function() {
      _this.removeClass('press');
    }, 900 * index);
  });
});

答案 4 :(得分:7)

如果要在某些语句上禁用输入。 使用[readonly]=truefalse而不是禁用。

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

答案 5 :(得分:5)

我认为你的意思是false而不是'false'

此外,[disabled]期待Boolean。您应该避免返回null

答案 6 :(得分:3)

回应Belter对上述fedtuck's accepted answer的评论的说明,因为我缺乏添加评论的声誉。

根据Mozilla docs

,我所知道的并非如此
  

禁用等于true或false

当出现disabled属性时,无论值如何,都会禁用该元素。见this example

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

答案 7 :(得分:2)

您正在寻找的是禁用=&#34; true&#34; 。这是一个例子:

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

答案 8 :(得分:1)


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

答案 9 :(得分:1)

我更喜欢这种解决方案

在HTML文件中:

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

在TS文件中:

dynamicVariable = false; // true based on your condition 

答案 10 :(得分:1)

禁用了角度9中的Select

请记住,禁用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.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>

答案 11 :(得分:0)

Demo

make is_edit类型为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;
  }
}

答案 12 :(得分:0)

如果输入框/按钮必须保持禁用状态,则只需 <button disabled><input disabled>有用。

答案 13 :(得分:0)

可以简单地使用

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

我是这样子的。所以我更喜欢。

答案 14 :(得分:0)

实际上,当前推荐的使用反应性表单的方法(为了避免“检查后更改”错误)是不将disable属性与反应性表单指令一起使用。 您应该在组件类中设置此控件的disabled属性,并且disable属性实际上将在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