Merge pull request #32 from ckeditor/t/31

Other: Added reset button to the form sample. Closes #31.

src/app/demo-form/demo-form.component.html

@@ -24,6 +24,7 @@ <h3>User profile form</h3>
 	<p *ngIf="description && description.dirty" class="alert">Description is "dirty".</p>
 	<p *ngIf="description && description.touched" class="alert">Description has been "touched".</p>
 
+	<p><button type="reset" (click)="reset()">Reset form</button></p>
 	<p><button type="submit">Submit this form</button> <em>(Open the console first)</em></p>
 </form>
 

src/app/demo-form/demo-form.component.spec.ts

@@ -35,7 +35,7 @@ describe( 'DemoFormComponent', () => {
 	it( 'should log the model to the console when user submits the form', () => {
 		const spy = spyOn( console, 'log' );
 
-		const submitButton: HTMLButtonElement = fixture.debugElement.query( By.css( 'button' ) ).nativeElement;
+		const submitButton: HTMLButtonElement = fixture.debugElement.query( By.css( 'button[type=submit]' ) ).nativeElement;
 		submitButton.click();
 
 		expect( spy ).toHaveBeenCalledTimes( 1 );
@@ -63,4 +63,17 @@ describe( 'DemoFormComponent', () => {
 			done();
 		} );
 	} );
+
+	it( 'should reset form after clicking the reset button', ( done: Function ) => {
+		setTimeout( () => {
+			const resetButton: HTMLButtonElement = fixture.debugElement.query( By.css( 'button[type=reset]' ) ).nativeElement;
+			resetButton.click();
+
+			fixture.detectChanges();
+
+			expect( component.formDataPreview ).toEqual( '{"name":null,"surname":null,"description":"<p>&nbsp;</p>"}' );
+
+			done();
+		} );
+	} );
 } );

src/app/demo-form/demo-form.component.ts

@@ -33,6 +33,10 @@ export class DemoFormComponent implements AfterViewInit {
 		console.log( 'Form submit, model', this.model );
 	}
 
+	reset() {
+		this.demoForm!.reset();
+	}
+
 	get description() {
 		return this.demoForm!.controls.description;
 	}

src/ckeditor/ckeditor.component.ts

@@ -166,11 +166,13 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 
 	// Implementing the ControlValueAccessor interface (only when binding to ngModel).
 	writeValue( value: string | null ): void {
-		// If a null was received, the textarea content needs to be empty
-		if ( value == null ) {
+		// This method is called with the `null` value when the form resets.
+		// A component's responsibility is to restore to the initial state.
+		if ( value === null ) {
 			value = '';
 		}
-		// If already initialized
+
+		// If already initialized.
 		if ( this.editorInstance ) {
 			this.editorInstance.setData( value );
 		}