极客观点
项目管理
HarmonyOS
嗨，我正在使用 angular 7，我想禁用检索用户信息的输入，但是当我使用 [disabled] = true 它不起作用我想禁用 lastname 字段，我试试这个但是当我这样做并且当我发送我的表单时，它不会发送在 json 上禁用的输入
这是我在代码 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);
}
}
请帮助解决这个问题，谢谢你的时间我想解决这个问题
原文由 Abdelhaq BENDIDANE 发布，翻译遵循 CC BY-SA 4.0 许可协议
如果您禁用表单中的某个字段，则不会在生成的 JSON 中发送该字段。如果你想禁止用户输入但仍然希望该值包含在你的表单对象中，你必须将该字段标记为 只读：
总之：