Hai chiều ràng buộc trong các hình thức phản ứng

Question

Sử dụng góc 2, liên kết hai chiều rất dễ dàng trong các mẫu định hướng - bạn chỉ cần sử dụng cú pháp hộp chuối. Làm thế nào bạn sẽ sao chép hành vi này trong một hình thức theo định hướng mô hình?

Ví dụ: dưới đây là biểu mẫu phản ứng chuẩn. Hãy giả vờ nó phức tạp hơn nhiều so với vẻ bề ngoài, với rất nhiều đầu vào và logic nghiệp vụ khác nhau, và do đó thích hợp hơn cho phương pháp tiếp cận theo mô hình so với cách tiếp cận theo khuôn mẫu.

export class ExampleModel { 
    public name: string; 
    // ... lots of other inputs 
} 

@Component({ 
    template: ` 
     <form [formGroup]="form"> 
      <input type="text" formControlName="name"> 
      ... lots of other inputs 
     </form> 

     <h4>Example values: {{example | json}}</h4> 
    ` 
}) 
export class ExampleComponent { 
    public form: FormGroup; 
    public example: ExampleModel = new ExampleModel(); 

    constructor(private _fb: FormBuilder) { 
     this.form = this._fb.group({ 
      name: [ this.example.name, Validators.required ] 
      // lots of other inputs 
     }); 
    } 

    this.form.valueChanges.subscribe({ 
     form => { 
      console.info('form values', form); 
     } 
    }); 
} 

Tôi có thể áp dụng tất cả các loại logic cho giá trị biểu mẫu và ánh xạ chúng khi cần thiết. Tuy nhiên, tôi không muốn ánh xạ mọi giá trị đầu vào từ biểu mẫu. Tôi chỉ muốn xem các giá trị cho toàn bộ mô hình employee khi nó cập nhật, theo cách tiếp cận tương tự như [(ngModel)]="example.name" và được hiển thị trong đường ống json trong mẫu. Làm thế nào tôi có thể thực hiện điều này?

Answer 1

Bạn có thể sử dụng [(ngModel)] với biểu mẫu Phản hồi.

<form [formGroup]="form"> 
    <input name="first" formControlName="first" [(ngModel)]="example.first"/> 
    <input name="last" formControlName="last" [(ngModel)]="example.last"/> 
</form> 

export class App { 
    form: FormGroup; 
    example = { first: '', last: '' }; 

    constructor(builder: FormBuilder) { 
    this.form = builder.group({ 
     first: '', 
     last: '' 
    }) 
    } 
} 

Plunker

này sẽ chỉ thị hoàn toàn khác so với cái mà sẽ được sử dụng mà không cần các formControlName. Với các hình thức phản ứng, nó sẽ là FormControlNameDirective. Nếu không có formControlName, chỉ thị NgModel sẽ được sử dụng.

Answer 2

Đôi khi bạn có thể cần kết hợp [(ngModel)] với biểu mẫu Phản ứng. Tôi có thể là một số inputcontrol mà bạn không cần như là một phần của hình thức, nhưng bạn vẫn cần nó để được ràng buộc với bộ điều khiển. Sau đó, bạn có thể sử dụng: [(ngModel)]="something" [ngModelOptions]="{standalone: true}"