zgo/src/app/settings/settings.component.ts

import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@angular/forms';
import { User } from '../user.model';
import { Owner } from '../owner.model';

@Component({
	selector: 'app-settings',
	templateUrl: './settings.component.html',
	styleUrls: ['/settings.component.css']
})

export class SettingsComponent implements OnInit {

	settingsForm: UntypedFormGroup;
	owner: Owner;
	useZats: boolean;
	useVKey: boolean = false;
	coins = [
		{
			label: 'US Dollar',
			symbol: 'usd'
		},{
			label: 'Euro',
			symbol: 'eur'
		},{
			label: 'British Pound',
			symbol: 'gbp'
		},{
			label: 'Canadian Dollar',
			symbol: 'cad'
		},{
			label: 'Australian Dollar',
			symbol: 'aud'
		}
	];

    viewkeyControl = new FormControl({ value: null, disabled: true });

	constructor(
		private fb: UntypedFormBuilder,
		private dialogRef: MatDialogRef<SettingsComponent>,
		@Inject(MAT_DIALOG_DATA) public data: Owner
	) {
		this.useZats = data.zats;
		this.settingsForm = fb.group({
			name: [data.name, Validators.required],
			currency: [data.currency, Validators.required],
			useZats: [data.zats,  Validators.required],
			VkeyOn: [data.payconf, Validators.required],
			VKey: [{value:data.viewkey, disabled: true },
			        Validators.required
			      ]
		});
		this.owner = data;

	}

	ngOnInit() {
	}

	close() {
		this.dialogRef.close();
	}

	save() {
		this.owner.name = this.settingsForm.value.name;
		this.owner.currency = this.settingsForm.value.currency;
		this.owner.zats = this.settingsForm.value.useZats;
		this.owner.payconf = this.useVKey;
		if ( this.settingsForm.value.VkeyOn ) {
		    this.owner.viewkey = this.settingsForm.value.VKey;
		  }
		 else 
		    this.owner.viewkey = '';                      	
		this.dialogRef.close(this.owner);
	}

	onChange(ob: MatSlideToggleChange) {
		this.useZats = ob.checked;
	}

	onChangeVKeyOn(ob: MatSlideToggleChange) {
		console.log("Viewing key switch is " + 
			        ( ob.checked ? "[ON]." : "[OFF]." ) );
        
        this.useVKey = ob.checked;

	    if ( ob.checked ) 
	      this.viewkeyControl.enable()
	    else 
	      this.viewkeyControl.disable();

	}
}