ไม่สามารถใช้ ngModel เพื่อลงทะเบียนตัวควบคุมฟอร์มด้วยคำสั่ง formGroup หลัก

Question 1

หลังจากอัปเกรดเป็น RC5 เราเริ่มได้รับข้อผิดพลาดนี้:

ngModel cannot be used to register form controls with a parent formGroup 
 directive.
Try using formGroup's partner directive "formControlName" instead.  Example:

    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

      Or, if you'd like to avoid registering this form control,
 indicate that it's standalone in ngModelOptions:

      Example:

      
  <div [formGroup]="myGroup">
     <input formControlName="firstName">
     <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
  </div>

ดูเหมือนว่าใน RC5 จะไม่สามารถใช้ร่วมกันได้อีกต่อไป แต่ฉันไม่พบทางเลือกอื่น

นี่คือส่วนประกอบที่ทำให้เกิดข้อยกเว้น:

    <select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
    <option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
    </select>

Question 2

คำตอบอยู่ในข้อความแสดงข้อผิดพลาดคุณต้องระบุว่าเป็นแบบสแตนด์อโลนดังนั้นจึงไม่ขัดแย้งกับตัวควบคุมแบบฟอร์ม:

[ngModelOptions]="{standalone: true}"

Question 3

ขยายคำตอบของ @Avenir Çokaj

การเป็นมือใหม่ฉันไม่เข้าใจข้อความแสดงข้อผิดพลาดอย่างชัดเจนในตอนแรก

ข้อความแสดงข้อผิดพลาดระบุว่าใน formGroup ของคุณมีองค์ประกอบที่ไม่ได้รับการพิจารณาใน formControl ของคุณ (ตั้งใจ / บังเอิญ)

หากคุณตั้งใจที่จะไม่ตรวจสอบความถูกต้องของฟิลด์นี้ แต่ยังคงต้องการใช้ ngModel ในองค์ประกอบอินพุตนี้โปรดเพิ่มแฟล็กเพื่อระบุว่าเป็นส่วนประกอบแบบสแตนด์อโลนโดยไม่จำเป็นต้องมีการตรวจสอบความถูกต้องตามที่ @Avenir กล่าวไว้ข้างต้น

Question 4

ตกลงในที่สุดก็ใช้งานได้: ดูhttps://github.com/angular/angular/pull/10314#issuecomment-242218563

กล่าวโดยย่อคุณไม่สามารถใช้nameแอตทริบิวต์ภายใน a ได้อีกต่อไปformGroupและต้องใช้formControlNameแทน

Question 5

เมื่อคุณเขียนformcontrolname Angular 2 ไม่ยอมรับ คุณต้องเขียนformControlName มันเกี่ยวกับคำที่สองตัวพิมพ์ใหญ่

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>

หากข้อผิดพลาดยังคงเกิดขึ้นให้ลองตั้งค่าการควบคุมฟอร์มสำหรับฟิลด์วัตถุทั้งหมด (myObject)

ระหว่างเริ่มต้น<form> </form>เช่น:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Question 6

import { FormControl, FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';


    this.userInfoForm = new FormGroup({
      userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required]))
    });

<form [formGroup]="userInfoForm" class="form-horizontal">
            <div class="form-group">
                <label class="control-label"><i>*</i> User Name</label>
                    <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Name</label>
                    <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Surname</label>
                    <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName">
            </div>
</form>

ขยายข้อมูลโค้ด

Question 7

ถ้าคอมโพเนนต์มีมากกว่า 1 ฟอร์มให้ลงทะเบียนคอนโทรลและฟอร์มทั้งหมด

ฉันต้องการทราบว่าเหตุใดสิ่งนี้จึงเกิดขึ้นในองค์ประกอบบางส่วนไม่ใช่ในองค์ประกอบอื่น

ปัญหาคือฉันมี 2 แบบฟอร์มในส่วนประกอบเดียวและแบบฟอร์มที่สองยังไม่มี[formGroup]และยังไม่ได้ลงทะเบียนเนื่องจากฉันยังสร้างแบบฟอร์มอยู่

ฉันดำเนินการต่อและเขียนแบบฟอร์มทั้งสองให้เสร็จสมบูรณ์โดยไม่ต้องป้อนข้อมูลที่ไม่ได้ลงทะเบียนซึ่งจะช่วยแก้ปัญหาได้

Question 8

ฉันเพิ่งได้รับข้อผิดพลาดนี้เนื่องจากฉันไม่ได้ใส่ตัวควบคุมฟอร์มทั้งหมดของฉันไว้ภายใน a divด้วยformGroupแอตทริบิวต์

ตัวอย่างเช่นสิ่งนี้จะทำให้เกิดข้อผิดพลาด

<div [formGroup]='formGroup'>
</div>
<input formControlName='userName' />

อาจเป็นเรื่องง่ายที่จะพลาดหากเป็นรูปแบบที่ยาวเป็นพิเศษ

Question 9

หากคุณต้องการที่จะใช้[formGroup]กับformControlNameคุณต้องเปลี่ยนแอตทริบิวต์กับnameformControlNameformControlName

ตัวอย่าง:

ไม่ได้ผลเนื่องจากใช้แอตทริบิวต์[formGroup]andname

<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

คุณควรแทนที่nameแอตทริบิวต์โดยformControlNameและจะทำงานได้ดีดังต่อไปนี้:

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>

Question 10

ดูเหมือนว่าคุณกำลังใช้ ngModel ในช่องฟอร์มเดียวกันกับ formControlName การสนับสนุนการใช้คุณสมบัติอินพุต ngModel และเหตุการณ์ ngModelChange พร้อมคำสั่งรูปแบบปฏิกิริยาถูกเลิกใช้แล้วใน Angular v6 และจะถูกลบออกใน Angular v7

Question 11

ข้อผิดพลาดนี้จะปรากฏขึ้นเมื่อคุณมีตัวควบคุมฟอร์มบางอย่าง (เช่นอินพุตเลือก ฯลฯ ) ในแท็กกลุ่มฟอร์มของคุณโดยไม่มีคุณสมบัติ formControlName

ตัวอย่างเหล่านี้ทำให้เกิดข้อผิดพลาด:

<form [formGroup]="myform">
    <input type="text">
    <input type="text" [ngmodel]="nameProperty">
    <input type="text" [formGroup]="myform" [name]="name">
</fom>

มีสองวิธีคือแบบสแตนด์อะโลน:

<form [formGroup]="myform">
    <input type="text" [ngModelOptions]="{standalone: true}">
    <input type="text" [ngmodel]="nameProperty" [ngModelOptions]="{standalone: true}">
    <!-- input type="text" [formGroup]="myform" [name]="name" --> <!-- no works with standalone --
</form>

หรือรวมไว้ใน formgroup

<form [formGroup]="myform">
    <input type="text" formControlName="field1">
    <input type="text" formControlName="nameProperty">
    <input type="text" formControlName="name">
</fom>

อันสุดท้ายหมายถึงการกำหนดไว้ใน initialization formGroup

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});