title: Disable input on angular form
body: <p>Hi i'm using angular 7 and i  want to disable the input that retrieves the user information but when I use,  <code>[disabled] = true</code> it does not work I want to disable the <code>lastname</code> 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</p>
  
  <p>This is my form in code html  :</p>
  
  <pre><code>&lt;div id="forms" class="page-layout simple fullwidth" fxLayout="column"&gt;
  
      &lt;!-- HEADER --&gt;
      &lt;div class="header accent p-24 h-160" fxLayout="row" fxLayoutAlign="start center"&gt;
          &lt;div fxLayout="column" fxLayoutAlign="center start"&gt;
              &lt;div fxLayout="row" fxLayoutAlign="start center"&gt;
                  &lt;mat-icon class="secondary-text s-18"&gt;home&lt;/mat-icon&gt;
                  &lt;mat-icon class="secondary-text s-16"&gt;chevron_right&lt;/mat-icon&gt;
                  &lt;span class="secondary-text"&gt;Contact&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="h1 mt-16"&gt;Contact&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- / HEADER --&gt;
      &lt;div class="content p-24"&gt;
          &lt;p class="pt-16 pb-32"&gt;
              {{'contact.Veuillez remplir le formulaire ci-dessous pour effectuer votre demande.Nous allons traiter votre requête dans les plus brefs délais.' | translate}}
          &lt;/p&gt;
          &lt;div class="mb-24" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-md="row"&gt;
              &lt;form class="mat-card mat-elevation-z4 p-24 mr-24" fxLayout="column" fxLayoutAlign="start" fxFlex="1 0 auto"
                  name="form" [formGroup]="form"&gt;
  
                  &lt;div class="" style="text-align: center"&gt;
                      &lt;img class="logo-ca" src="assets/images/logos/snap.png"&gt;
                  &lt;/div&gt;
                  &lt;div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
  
                      &lt;mat-form-field appearance="outline" fxFlex="50" class="pr-4"&gt;
                          &lt;mat-label&gt;{{'contact.First name' | translate}}&lt;/mat-label&gt;
                          &lt;input matInput formControlName="firstname"&gt;
                          &lt;mat-icon matSuffix class="secondary-text"&gt;account_circle&lt;/mat-icon&gt;
                      &lt;/mat-form-field&gt;
  
                      &lt;mat-form-field appearance="outline" fxFlex="50" class="pl-4"&gt;
                          &lt;mat-label&gt;{{'contact.Last name' | translate}}&lt;/mat-label&gt;
                          &lt;input matInput formControlName="lastname"&gt;
                          &lt;mat-icon matSuffix class="secondary-text"&gt;account_circle&lt;/mat-icon&gt;
                      &lt;/mat-form-field&gt;
  
                  &lt;/div&gt;
  
                  &lt;div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
                      &lt;mat-form-field appearance="outline" fxFlex="100" class="pl-4"&gt;
                          &lt;mat-label&gt;{{'contact.Mail' | translate}}&lt;/mat-label&gt;
                          &lt;input matInput formControlName="email"&gt;
                          &lt;mat-icon matSuffix class="secondary-text"&gt;mail&lt;/mat-icon&gt;
                      &lt;/mat-form-field&gt;
                  &lt;/div&gt;
                  &lt;div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
                      &lt;mat-form-field appearance="outline" fxFlex="100" class="pl-4"&gt;
                          &lt;mat-label&gt;Groupe AD&lt;/mat-label&gt;
                          &lt;input matInput formControlName="group" required [pattern]="groupPattern"&gt;
                          &lt;mat-icon matSuffix class="secondary-text"&gt;group&lt;/mat-icon&gt;
                          &lt;mat-error *ngIf="group.errors?.required"&gt;{{'contact.Groupe AD is required!' | translate}}
                          &lt;/mat-error&gt;
                          &lt;mat-error *ngIf="group.errors?.pattern"&gt;{{'contact.Groupe AD is not Valid!' | translate}}
                          &lt;/mat-error&gt;
                      &lt;/mat-form-field&gt;
                  &lt;/div&gt;
                  &lt;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"&gt;
                      &lt;div [formGroupName]="i" fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
                          &lt;mat-form-field appearance="outline" fxFlex="40" class="pl-4"&gt;
                              &lt;mat-label&gt;Domaines&lt;/mat-label&gt;
                              &lt;input matInput formControlName="domain_name" required [pattern]="domainPattern"&gt;
                              &lt;mat-error *ngIf="requested_domains.errors?.required"&gt;
                                  {{'contact.Groupe AD is required!' | translate}}&lt;/mat-error&gt;
                              &lt;mat-error *ngIf="requested_domains.errors?.pattern"&gt;
                                  {{'contact.Groupe AD is not Valid!' | translate}}&lt;/mat-error&gt;
                          &lt;/mat-form-field&gt;
                          &lt;!--                         &lt;mat-form-field appearance="outline" fxFlex="30" class="pl-4"&gt;
                              &lt;mat-label&gt;Right&lt;/mat-label&gt;
                              &lt;mat-select placeholder="Right" formControlName="right" required&gt;
                                  &lt;mat-option value="R"&gt;R&lt;/mat-option&gt;
                                  &lt;mat-option value="RW"&gt;RW&lt;/mat-option&gt;
                              &lt;/mat-select&gt;
                          &lt;/mat-form-field&gt; --&gt;
                          &lt;mat-radio-group  formControlName="right" aria-label="Select an option" appearance="outline" fxFlex="40" class="pl-4" required&gt;
                              &lt;mat-radio-button style="font-size : 11px; margin-left: 10px" value="R"&gt;{{'contact.READ' | translate}}&lt;/mat-radio-button&gt;
                              &lt;mat-radio-button style="font-size : 11px; margin-left: 10px" value="RW"&gt;{{'contact.READ/WRITE' | translate}}&lt;/mat-radio-button&gt;
                          &lt;/mat-radio-group&gt;
                      &lt;/div&gt;
                          &lt;mat-icon title="Ajouter" fxFlex="10" mat-icon-button color="basic" (click)="addDomaines()" style="color:#3c5d80; cursor: pointer"&gt;add_circle&lt;/mat-icon&gt;
                          &lt;mat-icon *ngIf="form.controls.requested_domains.controls.length &gt; 1" title="Supprimer" fxFlex="10"
                              mat-icon-button color="basic" (click)="deleteRow(i)" style="color:#dd2d2d; cursor: pointer"&gt;delete_forever&lt;/mat-icon&gt;
  
                  &lt;/div&gt;
                  &lt;div fxLayout="row wrap" fxLayoutAlign="start center" fxFlex="1 0 auto"&gt;
                      &lt;mat-form-field appearance="outline" fxFlex="100" class="pl-4"&gt;
                          &lt;mat-label&gt;Message&lt;/mat-label&gt;
                          &lt;input matInput formControlName="comment"&gt;
                          &lt;mat-icon matSuffix class="secondary-text"&gt;message&lt;/mat-icon&gt;
                      &lt;/mat-form-field&gt;
                  &lt;/div&gt;
                  &lt;div fxLayoutAlign="end center"&gt;
                      &lt;button mat-raised-button color="primary" [disabled]="form.invalid" (click)="Envoyer()"&gt;{{'contact.Envoyer'
                        | translate }}&lt;/button&gt;
                  &lt;/div&gt;
  
              &lt;/form&gt;
              &lt;pre&gt;{{form.value | json}}&lt;/pre&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="medium" color="#fff" type="ball-clip-rotate"&gt;&lt;/ngx-spinner&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this my code TS:</p>
  
  <pre><code>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&lt;any&gt;;
  
      /**
       * 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) =&gt; {
                  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 =&gt; {
              this.spinner.hide();
              this.toastr.success("Your form has been successfully sent");
          },
          error =&gt; {
              this.toastr.error("Your form has not been sent");
              setTimeout(() =&gt; {
                  /** 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);
        }
  }
  </code></pre>
  
  <p>Please help to resolve this problem and thank you for your time i want to resolve this problem</p>