Once again, our copy-rename-replace trick can save us some valuable time--and space. Copy and paste the question-edit.component.ts and CSS files to the /ClientApi/api/components/result/ folder, rename them as result-edit.component, and perform the same case-sensitive find and replace tasks we used the last time:

• Replace Question with Result
• Replace question with result

As always, the wise reader should take the chance to manually implement the ResultEditComponent instead.

Once the class and style sheet files are ready, create the result-edit.component.html template file from scratch in that same folder and fill it with the following code (relevant lines are highlighted):

<h2>{{title}}</h2>
<div class="result-edit">
    <div>
        <label for="text">Result text:</label>
        <br />
        <textarea id="text" [(ngModel)]="result.Text" 
             placeholder="enter a suitable text..."></textarea>
    </div>

    <div>
        <label for="MinValue">Minimum Score Value:</label>
        <br />
        <input type="number" id="MinValue" name="MinValue"
               [(ngModel)]="result.MinValue" />
    </div>

    <div>
        <label for="MaxValue">Maximum Score Value:</label>
        <br />
        <input type="number" id="MaxValue" name="MaxValue"
               [(ngModel)]="result.MaxValue" />
    </div>

    <div>
        <input *ngIf="editMode" type="button" value="Apply Changes" 
                                (click)="onSubmit(result)" />
        <input *ngIf="!editMode" type="button" value="Create the 
                         Result!" (click)="onSubmit(result)" />
        <input type="button" value="Cancel" (click)="onBack()" />
    </div>

</div>

As we can see, we had to handle the MinValue and MaxValue unique properties of the Result interface. We already faced a similar scenario with the Value property in the AnswerEditComponent template file; however, this time we chose a different approach because these properties are meant to host nullable numeric values. The <input type="number /> is a good compromise here, as it will prevent users from inputting non-numeric values while also accepting an empty value, which will be treated as null by our code.