How to get value of a FormControl from and pass it as a parameter to a function?

Question

I have the following template :

 <form [formGroup]="firstFormGroup"  #formone="ngForm">
        <ng-template matStepLabel>Saisir l'url </ng-template>
        <mat-form-field fxFlex>
            <input matInput placeholder="Url" formControlName="subscriptionUrl" id="subscriptionUrl" required>
        </mat-form-field>


        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div>
                        <button type="button" mat-raised-button (click)="check()">
                            Calculer
                        </button>
                    </div>


                </div>
                <div class="row">
                    <div *ngIf="priceFound != 0">
                        <div class="col-md-6 grid-margin stretch-card">
                            <mat-form-field fxFlex>
                                <input matInput placeholder="trouvé" formControlName="Found" id="priceFound" required>
                                {{Found}}
                            </mat-form-field>
                        </div>
                        <button type="button" mat-raised-button matStepperNext>Valider  et passer à
                            l'étape suivante
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>

and the following typescript:

@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) => {
                this.Found = Resultat.result;
            },
            (error) => {
                console.log(error);
            }
        );
}}

While setting a value in the Form Control called subscriptionUrl, 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.

The error is:

SouscriptionComponent.html:14 ERROR TypeError: Cannot read property 'value' of undefined

Thanks for any help.

Answer 1

To follow up with my comment : you declare a variable

subscriptionUrl: FormControl;

But you never use it again. Not once you write

this.subscriptionUrl = ...;

This means your variable is undefined, hence not containing a value.

To get the value, either do this

this.firstFormGroup.get('subscriptionUrl').value;

Or add this once your forms are declared

this.subscriptionUrl = this.firstFormGroup.get('subscriptionUrl');

And to answer you : NO, creating a form doesn't instanciate variables in your component. To instanciate a variable, you have to explicitly state it with

this.subscriptionUrl = ...;

Answer 2

You can't get it. Because this statement subscriptionUrl: FormControl does nothing other than type declaration. So this.subscriptionUrl is undefined and you can read the property 'value' from it. Describe your objective and create a https://stackblitz.com/edit/angular-p38ksf to make it easy to understand.