禁用角度形式的输入 [英] Disable input on angular form
本文介绍了禁用角度形式的输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用angular 7，我想禁用检索用户信息的输入，但是当我使用 [disabled] = true 时，它不起作用，我想禁用姓氏字段，我尝试了此操作，但是当我执行此操作以及发送表单时，它不会发送在json上禁用的输入
Hi i'm using angular 7 and i want to disable the input that retrieves the user information but when I use, [disabled] = true it does not work I want to disable the lastname field ,
I try this but when I do it and when I send my form, it does not send the input disabled on the json
这是我在代码html中的表单:
This is my form in code html :
<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
<!-- HEADER -->
<div class="header accent p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">home</mat-icon>
<mat-icon class="secondary-text s-16">chevron_right</mat-icon>
<span class="secondary-text">Contact</span>
</div>
<div class="h1 mt-16">Contact</div>
</div>
</div>
<!-- / HEADER -->
<div class="content p-24">
<p class="pt-16 pb-32">
{{'contact.Veuillez remplir le formulaire ci-dessous pour effectuer votre demande.Nous allons traiter votre requête dans les plus brefs délais.' | translate}}
</p>
<div class="mb-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-md="row">
<form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto"
name="form" [formGroup]="form">
<div class="" style="text-align: center">
<img class="logo-ca" src="assets/images/logos/snap.png">
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
<mat-label>{{'contact.First name' | translate}}</mat-label>
<input matInput formControlName="firstname">
<mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline" fxFlex="50" class="pl-4">
<mat-label>{{'contact.Last name' | translate}}</mat-label>
<input matInput formControlName="lastname">
<mat-icon matSuffix class="secondary-text">account_circle</mat-icon>
</mat-form-field>
</div>
<div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100" class="pl-4">
<mat-label>{{'contact.Mail' | translate}}</mat-label>
<input matInput formControlName="email">
<mat-icon matSuffix class="secondary-text">mail</mat-icon>
</mat-form-field>
</div>
<div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100" class="pl-4">
<mat-label>Groupe AD</mat-label>
<input matInput formControlName="group" required [pattern]="groupPattern">
<mat-icon matSuffix class="secondary-text">group</mat-icon>
<mat-error *ngIf="group.errors?.required">{{'contact.Groupe AD is required!' | translate}}
</mat-error>
<mat-error *ngIf="group.errors?.pattern">{{'contact.Groupe AD is not Valid!' | translate}}
</mat-error>
</mat-form-field>
</div>
<div formArrayName="requested_domains"
*ngFor="let domain of form.controls.requested_domains.controls; let i = index" fxLayout="row wrap"
fxLayoutAlign="start center" fxFlex="1 0 auto">
<div [formGroupName]="i" fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="40" class="pl-4">
<mat-label>Domaines</mat-label>
<input matInput formControlName="domain_name" required [pattern]="domainPattern">
<mat-error *ngIf="requested_domains.errors?.required">
{{'contact.Groupe AD is required!' | translate}}</mat-error>
<mat-error *ngIf="requested_domains.errors?.pattern">
{{'contact.Groupe AD is not Valid!' | translate}}</mat-error>
</mat-form-field>
<!-- <mat-form-field appearance="outline" fxFlex="30" class="pl-4">
<mat-label>Right</mat-label>
<mat-select placeholder="Right" formControlName="right" required>
<mat-option value="R">R</mat-option>
<mat-option value="RW">RW</mat-option>
</mat-select>
</mat-form-field> -->
<mat-radio-group formControlName="right" aria-label="Select an option" appearance="outline" fxFlex="40" class="pl-4" required>
<mat-radio-button style="font-size : 11px; margin-left: 10px" value="R">{{'contact.READ' | translate}}</mat-radio-button>
<mat-radio-button style="font-size : 11px; margin-left: 10px" value="RW">{{'contact.READ/WRITE' | translate}}</mat-radio-button>
</mat-radio-group>
</div>
<mat-icon title="Ajouter" fxFlex="10" mat-icon-button color="basic" (click)="addDomaines()" style="color:#3c5d80; cursor: pointer">add_circle</mat-icon>
<mat-icon *ngIf="form.controls.requested_domains.controls.length > 1" title="Supprimer" fxFlex="10"
mat-icon-button color="basic" (click)="deleteRow(i)" style="color:#dd2d2d; cursor: pointer">delete_forever</mat-icon>
</div>
<div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto">
<mat-form-field appearance="outline" fxFlex="100" class="pl-4">
<mat-label>Message</mat-label>
<input matInput formControlName="comment">
<mat-icon matSuffix class="secondary-text">message</mat-icon>
</mat-form-field>
</div>
<div fxLayoutAlign="end center">
<button mat-raised-button color="primary" [disabled]="form.invalid" (click)="Envoyer()">{{'contact.Envoyer'
| translate }}</button>
</div>
</form>
<pre>{{form.value | json}}</pre>
</div>
</div>
<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="medium" color="#fff" type="ball-clip-rotate"></ngx-spinner>
</div>
这是我的代码TS:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { Subject } from 'rxjs';
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
import { locale as english } from 'app/pages/contact/i18n/en';
import { locale as french } from 'app/pages/contact/i18n/fr'
import { User } from 'app/models/user.model';
import { inject } from '@angular/core/testing';
import { AuthService } from 'app/services/auth.service';
import { takeUntil } from 'rxjs/operators';
import { ToastrService } from 'ngx-toastr';
import { NgxSpinnerService } from 'ngx-spinner';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html',
styleUrls: ['./contact.component.scss']
})
export class ContactComponent implements OnInit {
form: FormGroup;
domaines : FormArray;
user: User;
domainPattern = /^(?!:\/\/)([a-zA-Z0-9-]+\.){0,5}[a-zA-Z0-9-][a-zA-Z0-9-]+\.[a-zA-Z]{2,64}?$/;
groupPattern = /^[a-zA-Z_]+$/;
// Private
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {FormBuilder} _formBuilder
*/
constructor(
private _formBuilder: FormBuilder,
private _fuseTranslationLoaderService: FuseTranslationLoaderService,
private _authService: AuthService,
private cdref: ChangeDetectorRef,
private toastr: ToastrService,
private spinner: NgxSpinnerService
) {
// Set the private defaults
this._unsubscribeAll = new Subject();
this._fuseTranslationLoaderService.loadTranslations(english, french);
}
ngAfterContentChecked() {
this.cdref.detectChanges();
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void {
// Reactive Form
this.form = this._formBuilder.group({
firstname: [''],
lastname: [''],
email: [''],
group: ['', Validators.required],
requested_domains:this._formBuilder.array([this.initItemRows()]),
comment: ['',],
});
this._authService.getAuthStatusListener()
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((user) => {
this.user = user;
if(user){
this.form.patchValue({
firstname: user.first_name,
lastname:user.last_name,
email:user.user_email
})
}
});
}
/**
* On destroy
*/
ngOnDestroy(): void {
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
get primaryEmail() {
return this.form.get('email');
}
get requested_domains(){
return this.form.get('requested_domains');
}
get group(){
return this.form.get('group')
}
initItemRows() : FormGroup {
return this._formBuilder.group({
domain_name: [''],
right:['']
});
}
Envoyer(){
const form = this.form.value;
this.spinner.show();
this._authService.formulaire(form).subscribe(res => {
this.spinner.hide();
this.toastr.success("Your form has been successfully sent");
},
error => {
this.toastr.error("Your form has not been sent");
setTimeout(() => {
/** spinner ends after 5 seconds */
this.spinner.hide();
}, 1000);
}
);
}
addDomaines() {
this.domaines = this.form.get('requested_domains') as FormArray;
this.domaines.push(this.initItemRows());
}
deleteRow(index: number) {
this.domaines.removeAt(index);
}
}
请帮助解决此问题，谢谢您的宝贵时间，我想解决此问题
Please help to resolve this problem and thank you for your time i want to resolve this problem
推荐答案
如果禁用表单中的字段，则不会在生成的JSON中发送该字段.如果要禁止用户输入但仍希望将值包含在表单对象中，则必须将该字段标记为只读:
If you disable a field in your form, this field won't be sent in the resulting JSON. If you want to forbid user input but still want the value to be included in your form object, you have to mark the field as readonly:
<input matInput formControlName="lastname" [readonly]="true">
总结:
使用 readonly 属性可防止用户更改控件值，但您仍希望在表单对象中使用该值.
Use the readonly attribute to prevent the user from changing the control value, but you still want the value in your form object.
使用 disabled (禁用)属性来防止用户更改控件值，并且您不希望在表单对象中使用该值.
Use the disabled attribute to prevent the user from changing the control value and you don't want the value in your form object.
这篇关于禁用角度形式的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
