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

禁用和不可编辑不一定是一回事。一个禁用的输入当然也是不可编辑的，但它有一个独特的外观——灰色并且看起来“禁用”。只读输入看起来与普通输入相同，但不可编辑。因此，您必须问自己是要实际禁用控件还是只读。

如果你只想只读，你可以简单地使用 readonly <input>的属性(property)并将其绑定(bind)到 Controller 中的变量。例如:

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>