Reactive form setValue not correctly working after event generated by Mousetrap

[iboffa]

I have a timer that I toggle through Mousetrap pressing the space bar in an Angular application. here there is some code:

timeForm = new FormGroup({
        minutes: new FormControl(0, Validators.min(0)),
        seconds: new FormControl(0, [Validators.min(0), Validators.max(59)]),
        up: new FormControl(true),
        period: new FormControl(''),
        time: new FormControl(0)
    }
constructor(readonly update: UpdateService) {
	mousetrap.bind('space',()=>{this.running?this.stop():this.run()})
 }

ngOnInit(): void {
	this.timeForm.get('time').valueChanges.subscribe((t) => {
		this.timeForm.patchValue({ minutes: Math.floor(t / 60), seconds: t % 60 }, { emitEvent: false });
		this.update.update('scoreboard', 'time',
			`${this.timeForm.get('minutes').value.toString().padStart(2,     
                          '0'  }:${this.timeForm.get('seconds').value.toString().padStart(2, '0')}`);
		});
		this.timeForm.get('minutes').valueChanges.subscribe((t) => {
			this.timeForm.get('time').setValue(parseInt(t) * 60 + parseInt(this.timeForm.get('seconds').value))
		})
		this.timeForm.get('seconds').valueChanges.subscribe((t) => {
			this.timeForm.get('time').setValue(parseInt(this.timeForm.get('minutes').value) * 60 + parseInt(t))
		});
		this.timeForm.get('period').valueChanges.subscribe((period) => { this.update.update('scoreboard', 'period', period) });
		
	}

Now, when I use the GUI button to run the timer, values inside the form change correctly. When I use the spacebar, I can see updated values only when I stop the timer, they aren't updated while the time is going. Not a major issue, because while the timer is running the fields are disabled, but not aesthetically nice.