雙向無功形式

結合採用了棱角分明2，雙向綁定很容易在模板驅動的形式 - 你只需要使用香蕉箱語法。你將如何以模型驅動的形式複製這種行爲？雙向無功形式

例如，這裏是一個標準的反應形式。讓我們假裝它比看起來複雜得多，有很多很多不同的輸入和業務邏輯，因此比模板驅動的方法更適合模型驅動的方法。

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); 
     } 
    }); 
}

在subscribe()我能將各種邏輯來表單值並在必要時將它們映射。但是，我不想映射表單中的每個輸入值。我只希望看到整個employee模型在更新時的值，採用類似於[(ngModel)]="example.name"的方法，並顯示在模板中的json管道中。我怎樣才能做到這一點？

來源

2016-11-07 ebakunin

您可以使用[(ngModel)]與反應形式。

<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

這將完全不同的指令，會比使用不的formControlName之一。與反應形式，它將是FormControlNameDirective。如果沒有formControlName，則會使用NgModel指令。

來源

2016-11-07 06:49:41

問過類似的問題，在角/角和兩個核心開發人員告訴我，混合ngModel和反應形式是一個壞主意。你應該可以通過{{this.form.get（'first'）。value}} – Zuriel

@Zuriel獲得值，但是我怎樣才能將我的本地modeldata直接導入到我的表單中，所以我有兩種方法可以對我的modeldata進行數據綁定？因爲沒有上述溶液我需要將FORMDATA映射回我modeldata – squadwuschel

https://angular.io/guide/reactive-forms 在與反應性範例一致，部件保留了數據模型的不變性，將它視爲原始價值的純粹來源。該組件不是直接更新數據模型，而是提取用戶更改並將其轉發給外部組件或服務，這些外部組件或服務對它們執行某些操作（如保存它們），並將新數據模型返回給反映更新模型狀態的組件。 – Zuriel

有時你可能需要與活性形式的結合[（ngModel）。我可能會將一些輸入控件作爲表單的一部分，但您仍然需要將它綁定到控制器。然後你可以使用：[(ngModel)]="something" [ngModelOptions]="{standalone: true}"

來源

2017-10-20 07:32:30

雙向無功形式

回答

相關問題