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.