title: How to get value of a FormControl from and pass it as a parameter to a function?
body: <p>I have the following template : </p>
  
  <pre><code> &lt;form [formGroup]="firstFormGroup"  #formone="ngForm"&gt;
          &lt;ng-template matStepLabel&gt;Saisir l'url &lt;/ng-template&gt;
          &lt;mat-form-field fxFlex&gt;
              &lt;input matInput placeholder="Url" formControlName="subscriptionUrl" id="subscriptionUrl" required&gt;
          &lt;/mat-form-field&gt;
  
  
          &lt;div class="card"&gt;
              &lt;div class="card-body"&gt;
                  &lt;div class="row"&gt;
                      &lt;div&gt;
                          &lt;button type="button" mat-raised-button (click)="check()"&gt;
                              Calculer
                          &lt;/button&gt;
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div *ngIf="priceFound != 0"&gt;
                          &lt;div class="col-md-6 grid-margin stretch-card"&gt;
                              &lt;mat-form-field fxFlex&gt;
                                  &lt;input matInput placeholder="trouvé" formControlName="Found" id="priceFound" required&gt;
                                  {{Found}}
                              &lt;/mat-form-field&gt;
                          &lt;/div&gt;
                          &lt;button type="button" mat-raised-button matStepperNext&gt;Valider  et passer à
                              l'étape suivante
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>and the following typescript:</p>
  
  <pre><code>@Component({
  selector: 'stepper-overview-example',
  templateUrl: './souscription.component.html',
  styleUrls: ['./souscription.component.scss'],})
  
  export class SouscriptionComponent implements OnInit {
  isLinear = true;
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  subscriptionUrl: FormControl;
  subscr: Subscription;
  priceFound: number;
  
  constructor(private _formBuilder: FormBuilder, public router: Router, private userService: ClientApi, private souscriptionApi: SubscriptionApi) {
  
      this.subscr = new Subscription();
      this.firstFormGroup = this._formBuilder.group({
          subscriptionUrl: new FormControl('', [ Validators.required]),
          priceFound: new FormControl('')
      });
      this.secondFormGroup = this._formBuilder.group({
          subscriptionName: new FormControl('', [Validators.required]),
          subscriptionDesc: new FormControl('')
      });
  }
  
  ngOnInit() {
      }
  
  check() {
      console.log('this.subscriptionUrl.value' + this.subscriptionUrl.value);
      this.souscriptionApi.getP(this.firstFormGroup.get('subscriptionUrl').value)
          .subscribe((Resultat) =&gt; {
                  this.Found = Resultat.result;
              },
              (error) =&gt; {
                  console.log(error);
              }
          );
  }}
  </code></pre>
  
  <p>While setting a value in the Form Control called <strong>subscriptionUrl</strong>, I cannot get its value typescript side.
  I would like to get the value of this field and pass it as a parameter to a function type script side to treat it.</p>
  
  <p>The error is: </p>
  
  <pre><code>SouscriptionComponent.html:14 ERROR TypeError: Cannot read property 'value' of undefined
  </code></pre>
  
  <p>Thanks for any help.</p>