Javascript Angular 6 如何在表单内制作所有输入的不可编辑元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51027615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 how to make all input's Not editable element inside a form
提问by Anouar Mokhtari
Is there a way to disable and make all fields non editable(input / mat-select / textfield / option/input/mat-checkbox etc)inside a Form
有没有办法禁用和使表单内的所有字段不可编辑(input / mat-select / textfield / option/input/mat-checkbox etc)
by telling only the parent div name in Angular / Angular-material ? (cannot editing them)
通过只告诉 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>
回答by G. Tranter
Disabled and not editable are not necessarily the same thing. A disabled input is of course also not editable, but it has a distinct appearance - greyed out and looks 'disabled'. A read-only input looks the same as a normal input, but is not editable. So you have to ask whether you want your controls actually disabled or just read-only. It sounds like you just want read-only. To do that, you just need to use the readonlyproperty of <input>and bind it to a variable in your controller. For example:
禁用和不可编辑不一定是一回事。禁用的输入当然也不可编辑，但它具有独特的外观 - 变灰并看起来“禁用”。只读输入看起来与普通输入相同，但不可编辑。因此，您必须询问您是否希望您的控件实际上被禁用或只是只读的。听起来您只想只读。为此，您只需要使用 的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>
Note that the editableproperty doesn't need to be an @Input, but that could be useful if you are using the form as a reusable component and need to make the editable/read-only decision at the DOM level.
请注意，该editable属性不需要是@Input，但如果您将表单用作可重用组件并且需要在 DOM 级别做出可编辑/只读决定，这可能很有用。
For other components like radio buttons, where no readonlyproperty is available, you should probably rethink the layout. It might make more sense to use a different component to display the radio option in read-only mode, rather than the complete list of options. For example, use a label and value pair:
对于其他组件，如单选按钮，没有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>
回答by BlackBeard
If you are using reactive form you can achieve this programmatically like this (one-by-one approach):
如果您使用的是反应式形式，您可以像这样以编程方式实现这一点（一对一方法）：
this.formGroupName.controls[controlNmae].disable();
Eg: this.formGroupName.controls['lastName'].disable()
例如： this.formGroupName.controls['lastName'].disable()
To disable all at once:
一次性禁用所有功能：
this.formGroupName.disable()
In your case do: this.leaseholderForm.disable()
And to turn it back do: this.leaseholderForm.enable()
在你的情况下做：this.leaseholderForm.disable()
并把它转回来：this.leaseholderForm.enable()
What you can do is create a function like this and call it after you have called createLeaseholderForm():
您可以做的是创建一个这样的函数，并在调用后调用它createLeaseholderForm()：
disableForm() {
this.leaseholderForm.disable()
}
for more info read this.
有关更多信息，请阅读此内容。
回答by KimCindy
Since disabledattribute doesn't work on some components, what I did is - I set the pointer-events:noneon the css to cover all the components inside the div content.
由于disabled属性在某些组件上不起作用，我所做的是 - 我在 css 上设置了pointer-events:none以覆盖 div 内容中的所有组件。
Here's my CSS code:
这是我的 CSS 代码：
.disabledDiv {
pointer-events: none;
opacity: 0.4; }
Here's my HTML:
这是我的 HTML：
<div class="content-area" [ngClass]="{disabledDiv: !isActiveDiv}">
<!-- other components here (input/select/etc.) -->
<div>
And on my TS:
在我的 TS 上：
editData() {
this.isActiveDiv = true;
}
回答by ggradnig
Create a FormGroup as explained here:
按照此处的说明创建一个 FormGroup：
https://angular.io/guide/reactive-forms#add-a-formgroup
https://angular.io/guide/reactive-forms#add-a-formgroup
Then, grab the formGroupinstance programmatically and call .disable()on it, like this:
然后，以formGroup编程方式获取实例并调用.disable()它，如下所示：
this.leaseholderForm.disable()
this.leaseholderForm.disable()
回答by Aditya
Use disableattribute in the html template.
disable在 html 模板中使用属性。
<mat-form-field>
<input matInput upperCaseInput placeholder="Nom d'usage" formControlName="lastName" disable>
</mat-form-field>
回答by Nishant Kohli
this.formGroupName.controls['lastName'].disable()
Did not work for me in Angular 8. So I made it work by adding a 'readonly' attribute inside the HTML and then change its value in .ts file.
在 Angular 8 中对我不起作用。所以我通过在 HTML 中添加一个“只读”属性然后在 .ts 文件中更改它的值来使它工作。
inside .html file
在 .html 文件中
<input formControlName="email" matInput type="email" #email email="true" [readonly]="email_readonly" />
inside .ts file
.ts 文件内
email_readonly = false;
yourFunction()
{
this.email_readonly = true;
}
回答by NaduniJ
Use readonly attribute in the HTML file inside the input tag.
在输入标签内的 HTML 文件中使用 readonly 属性。
