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

问题描述

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

Is there a way to disable and make all fields non editable(input / mat-select / textfield / option/input/mat-checkbox etc) inside a Form

通过仅在Angular/Angular-material中告诉父div名称?(无法对其进行编辑)

by telling only the parent div name in Angular / Angular-material ?(cannot editing them)

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

推荐答案

如果您使用反应式表单，则可以通过编程方式实现这一点(一对一方法):

If you are using reactive form you can achieve this programmatically like this (one-by-one approach):

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

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

要一次禁用所有功能:

this.formGroupName.disable()

以您的情况为例:this.leaseholderForm.disable()
并转回去执行:this.leaseholderForm.enable()

In your case do: this.leaseholderForm.disable()
And to turn it back do: this.leaseholderForm.enable()

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

What you can do is create a function like this and call it after you have called createLeaseholderForm():

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

有关更多信息，请阅读此.

for more info read this.

这篇关于Angular 6如何在表单内创建所有输入的不可编辑元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！