formControlName และ FormControl แตกต่างกันอย่างไร

ฉันใช้ReactiveFormsModuleAngular2 เพื่อสร้างส่วนประกอบที่มีฟอร์ม นี่คือรหัสของฉัน:

foo.component.ts :

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': []
    });
}

foo.component.html (ด้วย[formControl]):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" [formControl]="myForm.controls.fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

foo.component.html (ด้วยformControlName):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" formControlName="fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" formControlName="gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" formControlName="gender">
            <label>Female</label>
        </div>
    </div>
</div>

ทั้งสองวิธีได้ผล แต่ฉันคิดไม่ออกว่าความแตกต่างระหว่างการใช้[formControl]กับformControlName.

ฉันเชื่อว่าคุณพลาดจุดสำคัญ: [formGroup]คำสั่งในตัวอย่างที่สอง formControlNameใช้ร่วมกับ[formGroup]เพื่อบันทึกการนำทางหลายจุดของฟอร์มของคุณ ตัวอย่างเช่น:

<div>
  <input type="text" [formControl]="myForm.controls.firstName"/>
  <input type="text" [formControl]="myForm.controls.lastName"/>
  <input type="text" [formControl]="myForm.controls.email"/>
  <input type="text" [formControl]="myForm.controls.title"/>
</div>

เทียบเท่ากับ:

<div [formGroup]="myForm">
  <input type="text" formControlName="firstName"/>
  <input type="text" formControlName="lastName"/>
  <input type="text" formControlName="email"/>
  <input type="text" formControlName="title"/>
</div>

ตอนนี้จินตนาการว่าซ้อนกันFormGroups:)

[formControl]กำหนดการอ้างอิงถึงFormControlอินสแตนซ์ที่คุณสร้างให้กับไฟล์FormControlDirective.

formControlName กำหนดสตริงสำหรับโมดูลฟอร์มเพื่อค้นหาตัวควบคุมตามชื่อ

หากคุณสร้างตัวแปรสำหรับการควบคุมคุณก็ไม่จำเป็นต้องใช้สิ่ง.ที่แฮร์รี่กล่าวถึง แต่ฉันขอแนะนำให้ใช้[formGroup]แทนเพราะด้วยรูปแบบที่ซับซ้อนกว่านี้อาจทำให้ยุ่งได้

constructor(fb: FormBuilder) {
    this.fullName = new FormControl('', Validators.required);
    this.gender = new FormControl('');
    this.myForm = fb.group({
        'fullname': this.fullName,
        'gender': this.gender
    });
}

มีการเทียบเคียงที่สามกับทั้งสองที่ระบุไว้ในคำตอบที่ยอมรับซึ่งเป็นสิ่งนี้ (ไม่แนะนำ):

<div [formGroup]="myForm">
  <input type="text" [formControl]="firstName"/>
  <input type="text" [formControl]="lastName"/>
  <input type="text" [formControl]="email"/>
  <input type="text" [formControl]="title"/>
</div>

สังเกตว่าเรายังคงใช้คำสั่ง [formGroup]

อย่างไรก็ตามเพื่อให้เทมเพลตนี้คอมไพล์โดยไม่มีข้อผิดพลาดคอมโพเนนต์ของคุณจำเป็นต้องประกาศตัวควบคุมเป็น AbstractControls ไม่ใช่ FormControls:

myComponent.ts

firstName: AbstractControl
lastName: AbstractControl
email: AbstractControl
title: AbstractControl

อย่างไรก็ตามโปรดทราบว่าไม่แนะนำให้ประกาศ AbstractControls ดังนั้นหากคุณได้รับข้อผิดพลาดCannot find control with unspecified name attributeอาจเป็นไปได้ว่าคุณได้ผสมสไตล์หรือได้ประกาศการควบคุมของคุณเป็น AbstractControls

จากเอกสารเชิงมุม ( https://angular.io/guide/reactive-forms ):

ส่วนประกอบ

@Component({
  ...
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

เทมเพลต

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

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

ด้วย[formControl]คุณสามารถใช้ข้อดีของโปรแกรมปฏิกิริยาเพราะFormControlมีชื่อคุณสมบัติvalueChanges(ฉันรู้ว่าคนนี้ตอนนี้อาจจะมีมากกว่านั้น) ซึ่งผลตอบแทนObservableที่คุณสามารถสมัครและใช้งานได้ (ตัวอย่างเช่นมีประโยชน์มากในสถานการณ์การลงทะเบียนซึ่งคุณต้องการตรวจสอบอีเมลที่ป้อนเพื่อไม่ให้ทำซ้ำทันทีที่ผู้ใช้เปลี่ยนค่า)