web-dev-qa-db-ja.com

FormGroup内での[（ngModel）]の使用

私の申請書には登録フォームがあります。ただし、この登録フォーム内には、オプションの「パスワード」および「パスワードの繰り返し」入力があります。これらの2つの値を取得するためにFormControlオブジェクトを使用したくないので（他の値でも構いません）、<form>内でngModelを使用するための回避策が必要です。

MCVE

TS：

public password: string = '';
public passwordRe: string = '';
public registrationForm;

constructor(public fb: Formbuilder) {
    this.registrationForm = this.fb.group({
       'firstname' : [null, Validators.required],
       'lastname': [null, Validators.required]
    });
 }

HTML

<form [formGroup]="registrationForm" (ngSubmit)="doSomething()">
            <div class="form-group"
            [ngClass]="{'has-error':!registrationForm.controls['firstname'].valid 
            && registrationForm.controls['firstname'].touched}">
                <label>Firstname: *</label>
                <input class="form-control" type="text" placeholder="Firstname" [formControl]="registrationForm.controls['firstname']"/>
            </div>

            <div class="form-group"
            [ngClass]="{'has-error':!registrationForm.controls['lastname'].valid 
            && registrationForm.controls['lastname'].touched}">
                <label>Lastname: *</label>
                <input class="form-control" type="text" placeholder="Lastname" [formControl]="registrationForm.controls['lastname']"/>
            </div>

            <!-- NG MODELS -->

            <input type="password" [(ngModel)] = "password"/>
            <input type="password" [(ngModel)] = "passwordRe" />

            <input type="submit" value="Some submit button"/>
</form>

このページは、セレクタを介して子として複数のページに表示されます。フォームの外側の一番上にパスワードを配置するのが最も手間のかかるソリューションですが、それを得るにはいくつかのコードを変更する必要があります。 （さらに見栄えがよくありません）したがって、この特定の問題の回避策があるかどうか疑問に思っていました。

angulartypescriptangular2-forms
22
Ivar Reukers

基本的に、使用しているngModelがスタンドアロンであることを指定できます。そして、このようなものを使用してください

 <input type="password" [(ngModel)] = "password" [ngModelOptions]="{standalone: true}" />
41
Hasan Wajahat
 <input type="password" [(ngModel)] = "password" [ngModelOptions]="{standalone: true}" />
0
Harsha Vardhan Reddy N

属性を提供する場合：

formControlName = "ここにフォームコントロール名"

入力では、そのように共存できます。

<input type="password"
       [(ngModel)] = "password"
       formControlName = "password"/>

formControlNameは、FormGroupで指定された名前と一致する必要があります

this.formGroup = this._formBuilder.group({
  'password': new FormControl(this.password, [
     Validators.required,
     Validators.minLength(4)
  ])
});
0
Stacker-flow