Отключить ввод в угловой форме

Привет, я использую 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);
      }
}

Пожалуйста, помогите решить эту проблему и спасибо за ваше время, я хочу решить эту проблему