typescript - วิธีเพิ่ม formcontrol ให้กับ textarea ใน angular 8

ฉันกำลังทำงานเกี่ยวกับฟอร์มติดต่อและไม่สามารถส่งค่าของ textarea โดยใช้ ngModel ได้ ฉันได้รับข้อผิดพลาดจากเบราว์เซอร์ซึ่งฉันจะแปะไว้ด้านล่าง

ฉันได้ลองใช้ reactiveforms แต่ก็เจอปัญหาและข้อผิดพลาดเหมือนเดิม

// 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>

// ไทพ์สคริปต์

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

// การแสดงผลบนคอนโซล

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

// ข้อผิดพลาด

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)"

คำตอบ #1

ดังนั้นโค้ดนี้ทางเทคนิคแล้วมีปัญหาที่เกิดขึ้นอยู่ 2 เรื่องต่างกัน

ประเด็นแรกถูกกล่าวไว้อย่างยอดเยี่ยมโดยป๊อป

ปัญหาที่สองคือช่องข้อความไม่ทำงานเข้ากับฟอร์มอย่างราบรื่น

ในการแก้ปัญหาที่สอง ต้องเพิ่ม ngDefaultControl ให้กับ textarea ทำให้ element textarea ที่ได้มีลักษณะดังนี้หลังจากเพิ่มทั้งสองวิธีแก้ไขลงไปแล้ว

    <li>
      <label>This is where your message goes!</label>
      <textArea ngModel ngDefaultControl name="q4" rows="5" cols="60" required>
      </textArea>
    </li>

คำตอบ #2

ด้วยสัญกรณ์นี้

<textArea [(ngModel)]="q4" name="q4" rows="5" cols="60" required>

คุณทำให้ Angular สับสน มันมีทั้งชื่อและ ngModel ที่มันควรจัดการ ดังนั้นมันเลยยกมือขึ้นและพูดว่า "duh" ผมหมายถึง, "undefined" เห็นไหมว่าคุณทำมันกับ input ก่อนหน้านี้อย่างไร? ลองดู

<textArea [(ngModel)]="q4" rows="5" cols="60" required>

หรือ

<textArea ngModel name="q4" rows="5" cols="60" required>