web-dev-qa-db-ja.com

テンプレートから関数にFormControlを渡すにはどうすればよいですか？

私がこれを持っているとしましょう：

<input formControlName="someName" (click)="onClick()">

onClick関数をジェネリックにして、対応するFormControl（クリックしたもの）の値を設定します。

関係するFormControlをonClickのパラメーターとして渡すにはどうすればよいですか？

FormControlDirective または FormControlName のcontrolプロパティから取得できると思いましたが、exportAs属性がありません。

javascriptangularangular-reactive-forms
2
Guerric P

設定する値のタイプはわかりませんが、このタイプの一般的な操作（単純な場合）には属性ディレクティブを使用できます。

属性ディレクティブを作成してすべてのフォームコントロールに設定すると、属性ディレクティブロジックが自動的に処理します。ディレクティブに渡される値を定義して構成できます。

"@ angular/core"から{ディレクティブ、HostListener、ElementRef、Input}をインポートします。

@Directive({
  selector: '[clickMe]'
})
export class ClickDirective {
  @Input('clickMe') clickValue:string;
  constructor(private elementRef: ElementRef){}

  @HostListener('click') onClick() {
    this.elementRef.nativeElement.value = this.clickValue;
  }
}

これらのディレクティブをフォームコントロールで使用して値を渡すだけで、データバインディングも使用できます。

<form [formControl]="myForm">
  Firstname:<input type="text" fromControlName="firstname" [clickMe]="'first value'" />
<br>
Lastname:<input type="text" fromControlName="lastname" [clickMe]="'last value'" />
</form>

ここで動作するstackblitzを見つけてください： https://stackblitz.com/edit/angular-j1kwch

0
PrinceIsNinja

渡されたイベントを使用して、そこから属性名を取得できます。

<input type="text" class="form-control" formControlName="yourName" (blur)="yourMethod($event)" />

次に、メソッドでターゲットからformControlNameの名前を取得します。

yourMethod(event: any) {
  const controlName = e.target.getAttribute('formcontrolname');
  this.formGroup.get(controlName); // this is your FormControl
  ....
}
0
tbadlov

あなたが何をしているのか正確にはわかりませんが、以下がうまくいくかどうか試してください。 setValue() メソッドを使用してフォームの値を設定します。フォームの部分的な値のみを設定する場合は、 patchvalue を使用することもできます。

テンプレート

<form [formGroup]='groupedform' >
  <label>Name:  <br>
    <input type="text" formControlName='Name' required (mousedown)="onMouseDown(groupedform)"/>
  </label>
  <br>
  <br>
  <label>Email:  <br>
    <input type="email" formControlName='Email' required (mousedown)="setEmail(groupedform)"/>
  </label>
  <p>
  <button type="submit" [disabled]="!groupedform.valid" (click)="updateName()">Update Name</button>
  </p>
</form>

成分

export class AppComponent  {
   name = 'Angular';
   firstname = new FormControl('');
   groupedform = this.fb.group({
    Name : ['', Validators.required],
    Email: [],
  });

  constructor(private fb:FormBuilder) { }

  updateName() {
    console.log(this.groupedform.value);
  }

  onMouseDown(formControl: any) {
    this.groupedform.setValue({
      'Name': 'sample',
      'Email': '[email protected]'
    });
  }

  setEmail(formControl: any) {
    this.groupedform.patchValue({
      'Email': '[email protected]'
    });
  }
}

作業例： Stackblitz

0
Michael D

これにはテンプレート変数を使用できます

<input formControlName="someName" #temp (click)="onClick(temp)">

onClick(val) {
console.log(val);}
0
Diya