How to get the selected value and text from a dropdown on page load and on click a button with reactive form in angular 8

I have a dropdown whose data is coming from loop.Here I need to get the selected value and selected text on load and on click a span.I am using reactive form here.When I am using value, selected dropdown is coming empty on default selection. Here is the code below

home.component.html

<div>
<form [formGroup]="registerForm">
<select formControlName="title" class="form-control">

                        <option *ngFor="let grpdata of group" value="{{grpdata.groupid}}">{{grpdata.groupname}}</option>

                    </select>
 </form>
</div>
<p>home works!</p>
<div><span (click)="getSelectedVal()">Click here</span></div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
declare var $: any;
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  getListData: any;
  registerForm: FormGroup;
  group:any;
  constructor(private commonserviceService: CommonserviceService,private formBuilder: FormBuilder) { }

  ngOnInit() {
     this.registerForm = this.formBuilder.group({
            title: ['', Validators.required]
     })
      this.group = [{"groupid":1,"groupname":"project1"},{"groupid":2,"groupname":"project2"},{"groupid":3,"groupname":"project3"}];
      console.log('selected value is')
      console.log('selected text is')
  }
 getSelectedVal(){
     console.log('selected value is on click is')
     console.log('selected text is on click is')
 }
}