Question

有没有一种方法可以禁用所有字段并使它们不可编辑 (input / mat-select / textfield / option/input/mat-checkbox etc)位于表单内

通过仅在Angular / Angular-material中告诉父div名称？（无法对其进行编辑）

@Component({
  templateUrl: './leaseholder.component.html'
})
export class LeaseholderComponent implements OnInit, IFormDirtyWarningComponent {

  leaseholderForm: FormGroup;

  constructor(private router: Router, private formBuilder: FormBuilder) {
    this.createLeaseholderForm();
  }

  createLeaseholderForm() {
    this.leaseholderForm = this.formBuilder.group({
      civility: [this.identityModel.civility],
      firstName: [this.identityModel.firstName, Validators.compose([Validators.pattern("[^\\d]+")])],
      lastName: [this.identityModel.lastName, Validators.compose([Validators.pattern("[^\\d]+")])],
      birthName: [this.identityModel.birthName, Validators.compose([Validators.pattern("[^\\d]+")])],
      birthDate: [this.identityModel.birthDate],
      birthPlace: [this.identityModel.birthPlace, Validators.compose([Validators.pattern("[^\\d]+")])],
      nationality: ['FR', this.identityModel.nationality],
      endOfStay: [this.identityModel.endOfStay]
    });
  }

    <form [formGroup]="leaseholderForm" (ngSubmit)="onSubmit()">
                <div class="mat-radio-group-inverted">
                    <mat-radio-group formControlName="civility">
                        <mat-radio-button color="primary" value="MR">M.</mat-radio-button>
                        <mat-radio-button color="primary" value="MME">MME.</mat-radio-button>
                    </mat-radio-group>
                </div>
                <mat-form-field>
                    <input matInput upperCaseInput placeholder="Nom d'usage" formControlName="lastName">
                </mat-form-field>
...........................
..........  example
    </form>

Answer 1

如果您使用反应形式，您可以通过编程方式实现此目的（一种一对一的方法）：

 this.formGroupName.controls[controlNmae].disable();

例如：this.formGroupName.controls['lastName'].disable()

要一次禁用所有功能：

this.formGroupName.disable()

您的情况是：this.leaseholderForm.disable()
并转回去执行：this.leaseholderForm.enable()

您可以做的是创建一个像这样的函数，并在调用createLeaseholderForm()之后调用它：

disableForm() {
 this.leaseholderForm.disable()
}

有关更多信息，请阅读this。

Answer 2

禁用和不可编辑不一定是同一回事。禁用的输入当然也是不可编辑的，但是它具有明显的外观-呈灰色显示，看起来是“禁用”。只读输入看起来与普通输入相同，但不可编辑。因此，您必须询问您是要禁用控件还是将其设为只读。听起来您只想只读。为此，您只需要使用readonly的{{1}}属性并将其绑定到控制器中的变量即可。例如：

<input>

请注意，export class LeaseholderComponent implements OnInit, IFormDirtyWarningComponent { @Input() editable: boolean = false; // doesn't have to be an @Input ... } <form [formGroup]="leaseholderForm" (ngSubmit)="onSubmit()"> <mat-form-field> <input matInput [readonly]="!editable" upperCaseInput placeholder="Nom d'usage" formControlName="lastName"> </mat-form-field> ... </form>属性不必是editable，但是如果您将表单用作可重用组件并且需要将其设为可编辑/只读状态，则该属性很有用DOM级别的决定。

对于单选按钮之类的其他组件，如果没有@Input属性可用，则可能应该重新考虑布局。使用其他组件以只读模式而不是完整的选项列表显示单选选项可能更有意义。例如，使用标签和值对：

readonly

Answer 3

由于 disabled 属性在某些组件上不起作用，我要做的是-我在CSS上设置了 pointer-events：none 来覆盖其中的所有组件div内容。

这是我的CSS代码：

.disabledDiv {
      pointer-events: none;
      opacity: 0.4;   }

这是我的HTML：

<div class="content-area" [ngClass]="{disabledDiv: !isActiveDiv}"> 
    <!-- other components here (input/select/etc.) -->
<div>

在我的TS上：

editData() {
    this.isActiveDiv = true;
  }

Answer 4

按照以下说明创建FormGroup：

https://angular.io/guide/reactive-forms#add-a-formgroup

然后，以编程方式抓取formGroup实例，并在其上调用.disable()，如下所示：

this.leaseholderForm.disable()

Answer 5

this.formGroupName.controls['lastName'].disable()

在Angular 8中对我不起作用。因此，我通过在HTML内添加“ readonly”属性，然后在.ts文件中更改其值来使其工作。

.html文件内部

 <input formControlName="email" matInput type="email" #email email="true" [readonly]="email_readonly" />

.ts文件内部

email_readonly = false;

yourFunction()
{
  this.email_readonly = true;
}

Answer 6

在html模板中使用disable属性。

           <mat-form-field>
                <input matInput upperCaseInput placeholder="Nom d'usage" formControlName="lastName" disable>
            </mat-form-field>

Answer 7

enter image description here

在input标签内的HTML文件中使用readonly属性。

Angular 6如何在表单内创建所有输入的不可编辑元素

7 个答案: