The QuestionEditComponent poses no threat; its form structure is even simpler than QuizEditComponent. For this very reason, it can be a perfect exercise for the reader; all it takes is to retrace the steps of what we already did and repeat the exact same tasks. The form property, the injected fb: FormBuilder, the createForm(), and updateForm() methods, the tempQuestion instance to use within the onSubmit() method, and so on.

Just remember to set the QuizId variable to the tempQuestion instance, as the Entity Framework Data Provider will need it to create and/or update the question:

[...]

onSubmit() {

    // build a temporary question object from form values
    var tempQuestion = <Question>{};
    tempQuestion.Text = this.form.value.Text;
    tempQuestion.QuizId = this.question.QuizId;

[...]

Moving to the template file, it's all about adding the <form> element, changing the submit buttons, and using the [formGroup] and formControlName accordingly, instead of the existing [(ngModel)]. The only significant difference is the fact that we'll have a required <textarea> element instead of an <input type="text">, yet the things to do are still the same.

Last but not least, remember to append the helper methods to the component class: getFormControl(), isValid(), and so on; otherwise, we won't be able to use the shortcuts in the template file.

At the end of the day, we should be able to see something like this: