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

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()
}  

有关更多信息，请阅读此内容。

Answer 2

禁用和不可编辑不一定是同一回事。禁用的输入当然也是不可编辑的，但是它具有明显的外观-呈灰色显示，看起来是“禁用”。只读输入看起来与普通输入相同，但不可编辑。因此，您必须询问您是要禁用控件还是将其设为只读。听起来您只想只读。为此，您只需要使用readonly属性<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属性不必是@Input，但是如果您将表单用作可重用组件并且需要在DOM级别做出可编辑/只读决定，则该属性很有用。

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

<div *ngIf="editable; else readonlyRadio" 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>
<div #readonlyRadio>
    <label>Civility</label>
    <span>{{ leaseholderForm.controls['civility'].value }}</span>
</div>

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