0

小さなフォームがあり、ユーザーが要素をクリックすると、フォームにいくつかのフィールドを表示したいと考えています。このアクションは複数回実行できます。だから私の考えは、これらのフィールドをフォームに追加する別のhtmlファイルを用意することです。

public showMoreFields(): void {
    const wrapper_div = document.getElementById("wrapper");
    const template = require("./my-template.html")

    container.innerHTML += template
}

新しいフィールドが適切に追加されています。

私の最初の質問は、これは外部 html をロードするための最良の方法ですか? (「text/template」スクリプト タグがありません)

または、新しいコンポーネントを作成して、maim フォームに追加する必要がありますか?

....
<input type="text" .... />
<my-new-fields></my-new-fields>
...
<button></button>

もしそうなら、どうすれば新しいものを追加できますか?

についても読んでngTemplateOutletいますが、私のケースにどのように適用できるかわかりませんでした。私はこれについてかなり混乱しています

第二。私の新しいフィールドはクリックイベントで表示されていますが、機能をトリガーしていません。

例:

<span class="fa fa-remove" (click)="cleanInput()"></span>
// this is not executing the cleanInput function

ありがとう

4

2 に答える 2

0

非表示にするセクションで *ngIf または [hidden] 属性を使用できます。

例： 

<input [(ngModel)] = "model1">
<your-component *ngIf="areExtraFieldsVisible">
</your-component>
<button (click)="showExtraFields()"></button>
于 2019-10-11T09:54:29.587 に答える