The ResultEditComponent can also be upgraded just like the previous ones; yet, it features another slightly different logic--the MinValue and MaxValue properties, both of them having a nullable number type. The scenario is similar to the AnswerEditComponent Value property, which we faced in the previous paragraph, except that we now have two <input type="number"> instead of a single <select>.
Luckily enough, it doesn't change how we can handle it in the component template file:
[...]
<div class="form-group"
[ngClass]="{ 'has-error has-feedback' : hasError('MinValue')
}">
<label for="MinValue">Minimum Score Value:</label>
<br />
<input type="number" id="MinValue" name="MinValue"
formControlName="MinValue"
class="form-control"
/>
<span *ngIf="hasError('MinValue')"
class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span>
<div *ngIf="hasError('MinValue')"
class="help-block">
Insert a numeric value, or leave it blank to match everything
up to MaxValue.
</div>
</div>
<div class="form-group"
[ngClass]="{ 'has-error has-feedback' : hasError('MaxValue') }">
<label for="MaxValue">Maximum Score Value:</label>
<br />
<input type="number" id="MaxValue" name="MaxValue"
formControlName="MaxValue"
class="form-control"
/>
<span *ngIf="hasError('MaxValue')"
class="glyphicon glyphicon-remove form-control-feedback"
aria-hidden="true"></span>
<div *ngIf="hasError('MaxValue')"
class="help-block">
Insert a numeric value, or leave it blank to match everything
up to MinValue.
</div>
</div>
[...]
Also, in the class file (relevant lines are highlighted):
[...]
createForm() {
this.form = this.fb.group({
Text: ['', Validators.required],
MinValue: ['', Validators.pattern(/^d*$/)],
MaxValue: ['', Validators.pattern(/^d*$/)]
});
}
updateForm() {
this.form.setValue({
Text: this.result.Text,
MinValue: this.result.MinValue || '',
MaxValue: this.result.MaxValue || ''
});
}
[...]
The only new thing here is the Validator.pattern, which accepts a string or a regex that will be matched against the control value, to give it a valid or invalid status accordingly.
If we want to test these validators, we can temporarily change the MinValue and/or MaxValue input type to text, then go back to the form, insert a non-numeric value, and see what happens:
This was the last form-based component requiring attention; now that we've learned the technique, we'll use it for all of our future forms.