禁用角度形式的输入

Question

嗨，我正在使用 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);
      }
}

请帮助解决这个问题，感谢您的时间我想解决这个问题

Answer 1

如果您禁用表单中的某个字段，则不会在生成的 JSON 中发送该字段。如果您想禁止用户输入但仍希望将值包含在表单对象中，则必须将该字段标记为readonly：

<input matInput formControlName="lastname" [readonly]="true">

总之：

使用readonly属性来防止用户更改控件值，但您仍然希望表单对象中的值。

使用disabled属性可以防止用户更改控件值并且您不希望该值出现在表单对象中。

Answer 2

您不应该使用disabled反应形式。相反，将逻辑放在后面的代码（ts 文件）上：

this.form.get('lastname').disable();

// this.form.get('lastname').enable();

请注意，这些方法具有可选参数来控制是否要触发更改事件 ( this.form.get('lastname').valueChanges)，这是默认行为。

关于你的问题（我后来在评论中得到了它）：你可以用来this.form.getRawValue()检索所有字段值（包括禁用的字段值）。在文档上查看： https: //angular.io/api/forms/FormGroup#getrawvalue

实际上，正如@jo_va所说，也许该readonly字段更适合获得您想要的东西（尽管您无法从FormControl对象控制它）。