Wykorzystując React.js oraz Angular, stworzono funkcjonalnie równoważne kody źródłowe. Aby móc w metodzie handleSubmit pokazać zawartość kontrolki input w miejscu oznaczonym ???, należy odwołać się do atrybutu o nazwie:<br> React.js: <pre class="code-block">nazwa1 = React.createRef(); handleSubmit = e =&gt; { console.log(this.???.current.value); } ... &lt;form onSubmit={this.handleSubmit}&gt; &lt;input ref={this.nazwa1} name="nazwa2" id="nazwa3" for="nazwa4" /&gt; </pre> Angular: <pre class="code-block">&lt;form #f="ngForm" (ngSubmit) = "handleSubmit(f)"&gt; &lt;input ngModel name="nazwa1" id="nazwa2" class="nazwa3" for="nazwa4" &gt; ... handleSubmit(f) { console.log(f.value.???); } </pre>

To właśnie nazwa1 jest właściwym atrybutem, do którego trzeba się odwołać, żeby wyciągnąć wartość inputa zarówno w React, jak i w Angularze. W React, kiedy chcemy pobrać wartość z inputa przez refa, to przekazujemy ref={this.nazwa1}, a potem w handleSubmit robimy this.nazwa1.current.value. To po prostu dokładnie ta sama nazwa, którą przypisałeś do refa, nie ma tu żadnej magii. W Angularze z kolei input posiada ngModel oraz name="nazwa1" – i to name jest kluczowe, bo obiekt f.value generowany przez ngForm zawiera wszystkie pola po kluczach odpowiadających atrybutom name. Dzięki temu możesz potem użyć f.value.nazwa1 i dostajesz wartość inputa. W praktyce zawsze warto pilnować, żeby atrybut name był sensowny i jednoznaczny, bo to na nim opierają się frameworki przy serializacji danych formularza i obsłudze ich stanu. Moim zdaniem to jest jedna z bardziej praktycznych umiejętności przy pracy z dynamicznymi formularzami – jeśli ktoś nie dba o spójność nazw atrybutów name, to łatwo o błędy, które są potem trudne do wykrycia. Warto jeszcze pamiętać, że atrybuty typu id, class czy for mają zupełnie inne zastosowanie – służą do stylowania, powiązań z labelkami, itd. Name natomiast to podstawa logicznej obsługi wartości pól formularza. Często spotykam się z sytuacjami, że ktoś próbuje pobierać dane po id czy class, ale to nie jest zgodne z dobrymi praktykami – dla czytelności kodu i łatwości refaktoryzacji o wiele lepiej korzystać z name. Takie rozwiązania są też zalecane w oficjalnej dokumentacji zarówno React, jak i Angulara.