{"record":{"id":"36bffb4d5a035ffc","repo":"angular/angular-cli","slug":"ng-hmr-cannot-restore-input-textarea-values","errorCode":null,"errorMessage":"[NG HMR] Cannot restore input/textarea values.","messagePattern":"\\[NG HMR\\] Cannot restore input/textarea values\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"info","filePath":"packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts","lineNumber":226,"sourceCode":"        case 'textarea':\n        case 'time':\n        case 'url':\n        case 'week':\n          newElement.value = oldElement.value;\n          break;\n        case 'file':\n          // Ignored due: Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement':\n          // This input element accepts a filename, which may only be programmatically set to the empty string.\n          break;\n        default:\n          console.warn('[NG HMR] Unknown input type ' + oldElement.type + '.');\n          continue;\n      }\n\n      dispatchEvents(newElement);\n    }\n  } else if (oldInputs.length) {\n    console.warn('[NG HMR] Cannot restore input/textarea values.');\n  }\n\n  // Restore option\n  const newOptions = document.querySelectorAll('option');\n  if (newOptions.length && newOptions.length === oldOptions.length) {\n    console.log('[NG HMR] Restoring selected options.');\n    for (let index = 0; index < newOptions.length; index++) {\n      const newElement = newOptions[index];\n      newElement.selected = oldOptions[index].selected;\n\n      dispatchEvents(newElement);\n    }\n  } else if (oldOptions.length) {\n    console.warn('[NG HMR] Cannot restore selected options.');\n  }\n}\n","sourceCodeStart":208,"sourceCodeEnd":243,"githubUrl":"https://github.com/angular/angular-cli/blob/bb72145f9ab45aee29f523236b3a25cd0813a841/packages/angular_devkit/build_angular/src/tools/webpack/plugins/hmr/hmr-accept.ts#L208-L243","documentation":"A console.warn from the Angular CLI HMR helper meaning input/textarea values could not be restored after a hot reload. Restoration only happens when the number of new visible inputs/textareas exactly equals the number captured before the update; if they differ (or newInputs is empty) while oldInputs existed, the warning fires and previously typed values are lost.","triggerScenarios":"During restoreFormValues: oldInputs.length > 0 but newInputs.length !== oldInputs.length — the HMR update added or removed input/textarea elements, moved them out of document scope, or the new app rendered different markup.","commonSituations":"Editing a template/component in a way that changes the number or kind of form fields (adding a field, conditionally rendering inputs with *ngIf); HMR updating a lazy-loaded chunk that renders a different form; components that rebuild the DOM asynchronously so inputs are not present when restore runs.","solutions":["Expect this when the HMR update changes form structure; a full browser reload restores a clean state — just re-enter values or persist them.","Keep form structure stable while iterating (persist draft values in a service, localStorage, or NgRx so they survive HMR).","If inputs are conditionally rendered, ensure the same conditions hold before and after the update so counts match.","Disable HMR (--no-hmr) for form-heavy pages where state loss is disruptive."],"exampleFix":"// before (values lost on every HMR)\nsave() { this.api.save(this.form.value); }\n// after (draft survives HMR/reload)\nthis.form.valueChanges.subscribe(v => localStorage.setItem('draft', JSON.stringify(v)));","handlingStrategy":"fallback","validationCode":"const before = document.querySelectorAll('input:not([type=\"hidden\"]), textarea').length;\n// after the HMR update:\nconst after = document.querySelectorAll('input:not([type=\"hidden\"]), textarea').length;\nif (before !== after) console.info('Form structure changed; values will not be restored by HMR.');","typeGuard":"function canRestoreFormValues(oldLen: number, newLen: number): boolean {\n  return oldLen > 0 && oldLen === newLen;\n}","tryCatchPattern":null,"preventionTips":["Persist form drafts outside the DOM (service, localStorage).","Avoid structural template edits while relying on HMR for form state.","Use reactive forms bound to component state so values survive re-render.","Accept a full reload when changing form structure during development."],"tags":["hmr","angular","forms","state-loss"],"backgroundTag":"hmr-form-state-not-restored","analyzedSha":"bb72145f9ab45aee29f523236b3a25cd0813a841","analyzedAt":"2026-08-30T02:47:34.745Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}