角度4、コンポーネントへの1つの方法データバインディングビュー -- typescript フィールド と angular2-forms フィールド 関連 問題

Angular 4, One way data binding View to Component












0
vote

問題

日本語

私はユーザーの資格情報を取得するためのフォームを持っています。それらの認証情報を使用する前にそれらを暗号化する必要がありますが、次のようにしていれば、暗号化された値は(2方向データバインディングのため)のフォームコンポーネントに表示されます。

私は角度が新しい、私のTypeScriptモデルに入力値を渡す方法が見つかりません。 これがコード:

です <事前> <コード> <form> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input class="form-control" placeholder="Username" [(ngModel)]="user.username" [ngModelOptions]="{standalone: true}"> </div> <br> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input class="form-control" type="password" placeholder="Password" [(ngModel)]="user.password" [ngModelOptions]="{standalone: true}"> </div> <br> <button type="submit" class="btn btn-primary btn-lg btn-block" autofocus (click)="login(user)"> Login </button> </form>

およびもちろんユーザー定義

<事前> <コード> user = { username: '', password: '' };

モデルへの2つの方法データのバインディングを避ける方法[()]?私は(入力)または{{}}を試してみましたが、NotHigは機能しました。

すべての

英語

I have a form to get user credentials. Before using those credentials I need to encrypt them, but if I do as it follows, the encrypted values are shown into the form component (because of the 2-way data binding).

I'm new to Angular, and I can't find a way to pass input values to my typescript model. Here is the code:

<form>         <div class="input-group">           <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>           <input class="form-control" placeholder="Username" [(ngModel)]="user.username"                  [ngModelOptions]="{standalone: true}">         </div>         <br>         <div class="input-group">           <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>           <input class="form-control" type="password" placeholder="Password" [(ngModel)]="user.password"                  [ngModelOptions]="{standalone: true}">         </div>         <br>         <button type="submit" class="btn btn-primary btn-lg btn-block" autofocus (click)="login(user)">           Login         </button> </form> 

And of course the user definition

user = {   username: '',   password: '' }; 

How do I avoid the 2 way data binding to the model [()] ? I tried (input) or {{}} but nothig worked.

Thanks to all

</div
     
   
   

回答リスト

0
 
vote

私はそれらを暗号化する必要がないので私は私の問題を解決しました

 

I resolved My problem because I don't need to encrypt them anymore

</div
 
 

関連する質問

2  プログラムで無効フォームコンポーネントを無効にします  ( Programmatically disable a reactive form component ) 
無効フォームコントロールの初期状態を無効にする方法を理解しています。 <コード> someControl: [{value: '', disabled: true}] フォーム内の別の値の選択に基づいて、プログラムでディセーブル状態を変更する方法を説明し...

1  NGFormModelを使用して要素のリストを選択リストにバインドする方法  ( How do i bind a list of elements to a select list using ngformmodel ) 
などのフォームコンポーネントがあるとしましょう <事前> <コード> export class FormComponent { form: ControlGroup; categories: AbstractControl; text...

0  NGControlStatus(有効、無効、手付かず、汚れなど)が機能していません<select>  ( Ngcontrolstatus valid invalid pristine dirty etc not working on select ) 
私はmytest.pristineの条件で私の選択にクラスを追加しようとしているときにいくつかのフォーム検証をしようとしています。ただし、これは通常の入力でうまく機能します。下のマイ例をご覧ください。 <事前> <コード> <div class="form-g...

22  角度2でNGModuleでフォームグループを正しくインポートする方法  ( How to correctly import formgroup in ngmodule in angular 2 ) 
IMPORT 998876616 、 setAlert617 :にインポートしようとします。 <事前> <コード> setAlert0 しかしそれはエラーをスローします: 例外:無意識(約束):エラー:予期しない値 'formgroup' モジュ...

17  Angular 2フォームをコンポーネントから送信する方法は?  ( How to trigger angular 2 form submit from component ) 
基本的に、私はを持っています <事前> <コード> <form #f="ngForm" (ngSubmit)="save(f.form)" #formElement> ... <button class="btn btn-primary" #s...

0  ユーザー入力に基づくAngular JS 2.0スイッチスタイルシート  ( Angular js 2 0 switch stylesheets based on user input ) 
AngularJS 2.0アプリケーションをクリックしてスタイルシートを切り替える方法は? 今すぐ私はindex.htmlページのヘッドセクションにスタイルシートを含めています。 ...

7  Multipart / Form-Data Post要求をAngular2でビルドし、入力タイプファイルを検証  ( Build multipart form data post request in angular2 and validate input type file ) 
POSTリクエストを介して送信する必要がある画像(Base64)を持っています(そして応答を待つ)。 POSTリクエストは Content-Type:multipart/form-data のものである必要があります。 画像は Content-Type: i...

1  min / maxのAngular 2テンプレート駆動型フォーム検証を正しく設定する方法  ( How to correctly set up angular2 template driven form validation for min max ) 
テンプレート駆動型フォーム検証で新しい角度コンポーネントを実装しようとしています。私はドキュメントの後に続いていますここ、しかし結果を複製するようには思われることはできません。具体的には、入力が無効なときにエラーを示すDIVは表示されません。 これはコンテキス...

0  Angular 2とMVCでSQL Serverデータベースへの追加  ( Adding to sql server database in angular 2 and mvc ) 
角度とMVCを使用して、MicrosoftのSQL ServerのMicrosoftサーバに値を挿入しようとしています。 次のコードはaddemployeeコンポーネントです。 <事前> <コード> #!/usr/bin/python #---------...

1  Angular2ではNGFormを使用して配列値を取得する方法はありますか  ( Is there any way to get array value using ngform in angular2 ) 
たとえば、このようなコンポーネントを書きました。 <事前> <コード> @Component({ selector: 'home', template: ` <form (ngSubmit)="onSubmit(...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有