Dart角度形式原始/髒動態

我有一個用戶列表和用戶詳細信息組件，類似於英雄列表/詳細信息的教程中的設置，其中選擇列表中的用戶應使其在詳細信息組件中可編輯。問題在於改變用戶會使表單變髒。爲了使它更清楚這裏是精簡代碼：Dart角度形式原始/髒動態

@Component(...) 
class UserDetail { 
    @Input() 
    User user; 
    Future onSubmit() async {...} 
}

而且模板如下：

<form (ngSubmit)="onSubmit()" #userEditForm="ngForm"> 
    <h2>{{user.name}}</h2> 
    <input type="checkbox" 
     id="is_happy" 
     [(ngModel)]="user.is_happy" 
     ngControl="is_happy" 
     #is_happy="ngForm" /> 
    <div [hidden]="userEditForm.pristine"> 
     <material-button 
      [disabled]="!userEditForm.valid" 
      (trigger)="onSubmit()"> 
      Update 
     </material-button> 
    </div> 
</form>

我想讓這個形式僅僅是髒的，如果用戶交互與控制，而不是當底層用戶從外部改變時。

什麼是對方法做到這一點？有沒有辦法在用戶更改時重置表單？我還沒有找到任何可以輕鬆實現這個簡單用例的東西。

來源

2017-09-14 Milan

優秀的問題。

這是默認值訪問器的一個不幸的副作用。它正在創建一個反饋循環，導致控件在寫入時變髒。注意這個line當一個值被寫入輸入時，它會在輸入端引起一個'輸入'事件。然後被抓到here。然後使被叫做導致它髒:(

那麼，什麼選擇呢，你有控制權發生變化的功能。

不要用髒，但使用觸摸這實際上是隻設置上模糊，因此將主要由用戶行爲引起的。
使用angular_component的材料輸入監聽到keypress或onblur事件的變化，而不是輸入事件。
寫自己的ControlValueAccessor這是之間的混合體DefaultValueAccessor和材料輸入鏈接的ab OVE。通過混合我的意思是它使用按鍵或模糊，而不是'輸入'作爲onChange事件。

希望有幫助！

來源

2017-09-15 05:38:05

由於材料輸入是一個文本字段，我嘗試使用材質複選框，但它的行爲與常規復選框相同。我認爲沒有自定義值訪問器代碼[有]（https://github.com/dart-lang/angular_components/tree/e0f5073ae5e73c9d6cb6e481f89424087d2c780f/lib/src/components/material_checkbox）。另外，你知道是否有任何關於編寫ValueAccessors的文檔？我之前嘗試過，但我沒有得到任何地方。 – Milan

實際上有自定義值存取器代碼，但它具有與默認存取器相同的問題。這裏是[設置]（https://github.com/dart-lang/angular_components/blob/e0f5073ae5e73c9d6cb6e481f89424087d2c780f/lib/src/components/material_checkbox/material_checkbox.dart#L113），這裏是它標記的地方[髒]（https://github.com/dart-lang/angular_components/blob/e0f5073ae5e73c9d6cb6e481f89424087d2c780f/lib/src/components/material_checkbox/material_checkbox.dart#L118），因爲它使用標準檢查輸入，它也調用髒位。 –

這裏沒有任何單獨的文檔。繼上面鏈接的ValueAccessors之一是目前我們擁有的最好的。我們會把它列入清單，寫出一些更好的文檔。 –

Dart角度形式原始/髒動態

回答

相關問題