1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Anuncie Aqui
    Anuncie aqui você Também: fdantas@4each.com.br

How to add formcontrol to a textarea in angular 8

Discussão em 'Angular' iniciado por ajv97, Junho 10, 2025.

  1. ajv97

    ajv97 Guest

    I'm working on a contact form and can't get the form to submit the textarea value using ngModel. I keep getting an error from the browser that I will post down below

    I've tried using reactiveforms but end up with the same problem and error as before.

    // HTML

    <form #myform="ngForm" (ngSubmit)="send(myform)" autocomplete="off">
    <ol>
    <li>
    <label>What's your name?</label>
    <input ngModel name="q1" type="text" required/>
    </li>
    <li>
    <label>What's your email address?</label>
    <input ngModel name="q2" type="email" required/>
    </li>
    <li>
    <label>What's the purpose of the message?</label>
    <div>
    <span><input ngModel id="q3a" name="q3" type="radio" value="choice1" /><label for="q3a">choice 1</label></span>
    <span><input ngModel id="q3b" name="q3" type="radio" value="choice2" /><label for="q3b">choice 2</label></span>
    <span><input ngModel id="q3c" name="q3" type="radio" value="choice3" /><label for="q3c">choice 3</label></span>
    </div>
    </li>
    <li>
    <label>This is where your message goes!</label>
    <textArea [(ngModel)]="q4" name="q4" rows="5" cols="60" required>
    </textArea>
    </li>
    </ol>
    <input type="submit"/>
    <button type="submit">Send Message</button>
    </form>


    // Typescript

    send(form: NgForm){
    console.log(form.value);
    }


    // Console output

    {q1: "name", q2: "email", q3: "choice1", q4: undefined}


    // Error

    Error: Uncaught (in promise): Error: No value accessor for form control with name: 'q4'
    Error: No value accessor for form control with name: 'q4'
    at _throwError (forms.js:3313)
    at setUpControl (forms.js:3139)
    at forms.js:5963
    at ZoneDelegate.invoke (zone-evergreen.js:359)
    at Object.onInvoke (core.js:39698)
    at ZoneDelegate.invoke (zone-evergreen.js:358)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:855
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)
    at resolvePromise (zone-evergreen.js:797)
    at zone-evergreen.js:862
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39679)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)"

    Continue reading...

Compartilhe esta Página