角4自分自身のフォーム要素の要素

Question

私は初心者であり、私はこのことについて少し助けが必要な場合があります。まず第一に、私はそれがうまくいかないかを示して、それをどのように働かせたいかを書きます。

これは、あなたがngModelで動作する通常の方法である：

<form> 
     <input name="name" placeholder="name" [(ngModel)]="model.name" value="" /> 
     <select name="select" [(ngModel)]="model.select"> 
     <option value="1">..</option> 
     ... 
     </select> 
     <input type="button" value=" click me" /> 
    </form> 

これは、あなたが選択するための独自の外観をしたくない場合は十分です。私の目標は、このフォーム要素の将来の表示に合わせて設計できる、divやその他のコンテンツを作成できるコンポーネントを作成することです。一方、私はngModelの快適さを保ちたいと思います。だから、テンプレートが私の目的で次のようになります。

<form> 
     <input name="name" placeholder="name" [(ngModel)]="model.name" value="" /> 
     <app-select label="label" name="select" [placeholder]="'placeholder'" [(ngModel)]="select" [options]="options"></app-select > 
     <input type="button" value=" click me" /> 
    </form> 

悲しいこと:(、私はすでにこのようなものを作成しようとしましたが、私は失敗しているより多くの経験を持っている一部の人は、私にこれで私を助けてくださいもらえ ？事前のおかげで、あなたの時間と回答

必要であれば、私はここに、最小限のものを再作成することができます！https://stackblitz.com/

Answer 1

ここでは、私は、この私のフォームを形成しない方法です（覚えておいて、私は、フォームビルダで反応フォームをいない使用していますngModelを使用したテンプレート駆動型）：

最初にを作成し、formsというディレクトリにカスタムFormModuleを作成します。

次に、の中には、さまざまなフォームコンポーネントがあります。例えば、LoginFormComponentを使ってみましょう。ここで

LoginFormComponent次のとおりです。ここで

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'login-form', 
    templateUrl: './login-form.component.html' 
}) 
export class LoginFormComponent implements OnInit { 
    @Output() onChange: EventEmitter<FormGroup> = new EventEmitter(); 

    form: FormGroup; 

    constructor(private fb: FormBuilder) { 
     this.form = this.fb.group({ 
      email: [null, Validators.email], 
      password: [null, [Validators.required, Validators.minLength(6), Validators.maxLength(60)]] 
     }); 

     this.form.valueChanges.subscribe(() => this.onChange.emit(this.form)); 
    } 

    ngOnInit() { 
     this.onChange.emit(this.form); 
    } 
} 

はHTMLです：

<form autocomplete="off" [formGroup]="form"> 
    <div class="form-group"> 
     <label for="username">Email *</label> 
     <input type="text" id="username" class="form-control" placeholder="Enter your email address" formControlName="email" autofocus> 
     <control-messages [control]="form.get('email')"></control-messages> 
    </div> 

    <label for="password">Password *</label> 
    <input type="password" id="password" class="form-control" placeholder="Enter your password" formControlName="password"> 
    <control-messages [control]="form.get('password')" [label]="'Password'"></control-messages> 
</form> 

今FormModuleをインポートモジュール内にある任意のカスタムコンポーネントでは、私は、次の操作を行うことができます。

app.component.html：

<login-form (onChange)="form = $event"></login-form> 

<button (click)="submit()">Submit</button> 

app.component.ts：

@Component({...}) 
export class AppComponent { 
    form: FormGroup; 

    submit() { 
     // Do something with `this.form`. 
    } 
} 

デザインのこの種の利点は、すぐにスーパーは明白ではないかもしれないが、それはいくつかのことを行うために私たちを可能にします：

1. まず、FormModuleというカスタムをインポートしている限り、login-formコンポーネントをアプリのどこにでも再利用することができます。変更すれば、自動的にどこでも更新されます。物事をDRYに保ちます。
2. 次に、同じ送信ボタン/テキストをどこにも置いておきたくない場合は、別の場所で別のものを実行したい場合があるので、login-formコンポーネントにはフォーム自体のみが含まれ、送信ロジックはその外部で処理されます再利用性のために。これは、作成と編集の両方に使用されるフォームがある場合に重要です。編集中のボタンはデータを保存することができます。作成時にボタンが新しいものを作成できるようになります。フォームコンポーネントの中にサブミットボタンを置くと、この再利用は容易に実現できません。この1つは除き、LoginFormComponentと同じ一般的な考え方を以下の

   import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; 
   import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 
   
   import { Tag } from 'shared'; 
   
   @Component({ 
       selector: 'tag-form', 
       templateUrl: './tag-form.component.html' 
   }) 
   export class TagFormComponent implements OnInit { 
       @Output() onChange: EventEmitter<FormGroup> = new EventEmitter(); 
   
       form: FormGroup; 
   
       constructor(private fb: FormBuilder) { 
        this.form = this.fb.group({ 
         name: [null, Validators.email] 
        }); 
   
        this.form.valueChanges.subscribe(() => { 
         this.onChange.emit(this.form); 
        }); 
       } 
   
       @Input() 
       set tag(tag: Tag) { 
        if (tag) { 
         this.form.patchValue(tag); 
        } 
       } 
   
       ngOnInit() { 
        this.onChange.emit(this.form); 
       } 
   } 
   

   ：

少し複雑なフォームの場合

は、いくつかのデフォルト値を取ることができますフォームは、この例TagFormComponentを見てみましょうと言いますこれは、フォームのいくつかのデフォルト値を渡すことができます。このように：

<tag-form [tag]="tag" (onChange)="form = $event"></tag-form>