components/event-parameters/event-parameters.component.ts
Control panel form fields for GMM event parameters.
OnInit
| selector | app-event-parameters |
| imports |
MatLabel
MatFormField
MatInput
MatError
ReactiveFormsModule
NshmpSectionComponent
|
| templateUrl | ./event-parameters.component.html |
| styleUrl | ./event-parameters.component.scss |
Properties |
Methods |
constructor(service: AppService, destroyRef: DestroyRef)
|
|||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| controls |
Default value : this.service.formGroup.controls
|
|
Form controls state |
| form |
Default value : this.service.formGroup
|
|
Control panel form field state |
| parameters |
Default value : computed(() => this.service.usage()?.response.parameters)
|
|
Usage parameters |
import {Component, computed, DestroyRef, OnInit} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {MatError, MatFormField, MatLabel} from '@angular/material/form-field';
import {MatInput} from '@angular/material/input';
import {NshmpSectionComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {combineLatest} from 'rxjs';
import {AppService} from '../../services/app.service';
/**
* Control panel form fields for GMM event parameters.
*/
@Component({
imports: [MatLabel, MatFormField, MatInput, MatError, ReactiveFormsModule, NshmpSectionComponent],
selector: 'app-event-parameters',
styleUrl: './event-parameters.component.scss',
templateUrl: './event-parameters.component.html',
})
export class EventParametersComponent implements OnInit {
/** Form controls state */
controls = this.service.formGroup.controls;
/** Control panel form field state */
form = this.service.formGroup;
/** Usage parameters */
parameters = computed(() => this.service.usage()?.response.parameters);
constructor(
private service: AppService,
private destroyRef: DestroyRef,
) {}
ngOnInit(): void {
combineLatest([
this.controls.mMax.valueChanges,
this.controls.mMin.valueChanges,
this.controls.step.valueChanges,
])
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(() => this.service.resetState());
}
}
<!-- Event parameters -->
<nshmp-section label="Event Parameters">
<div class="grid-row grid-gap-1">
<!-- Event parameters: mMin input -->
<mat-form-field class="grid-col-4 mmin-input">
<mat-label>
Min Mw
<span class="form-required">*</span>
</mat-label>
<input
matInput
[max]="parameters()?.mMin?.max"
[min]="parameters()?.mMin?.min"
[formControl]="controls.mMin"
step="0.1"
type="number"
/>
<mat-error>
[
{{ parameters()?.mMin?.min }},
{{ parameters()?.mMin?.max }}
]
</mat-error>
</mat-form-field>
<!-- Event parameters: mMax input -->
<mat-form-field class="grid-col-4 mmax-input">
<mat-label>
Max Mw
<span class="form-required">*</span>
</mat-label>
<input
matInput
[max]="parameters()?.mMax?.max"
[min]="parameters()?.mMax?.min"
[formControl]="controls.mMax"
step="0.1"
type="number"
/>
<mat-error>
[
{{ parameters()?.mMax?.min }},
{{ parameters()?.mMax?.max }}
]
</mat-error>
</mat-form-field>
<!-- Event parameters: Step input -->
<mat-form-field class="grid-col-4 mstep-input">
<mat-label>
Mw Step
<span class="form-required">*</span>
</mat-label>
<input
matInput
[max]="parameters()?.step?.max"
[min]="parameters()?.step?.min"
[formControl]="controls.step"
step="0.1"
type="number"
/>
<mat-error>
[
{{ parameters()?.step?.min }},
{{ parameters()?.step?.max }}
]
</mat-error>
</mat-form-field>
</div>
</nshmp-section>