Question

我在提交表单时发现错误，说明它未定义。我开始研究并发现我需要在每个输入中添加ngModel #something="ngModel，以便表单能够获取输入，如下面示例网站https://toddmotto.com/angular-2-forms-template-driven

<input
  type="email"
  placeholder="Your email address"
  name="email"

  ngModel
  #userEmail="ngModel"

  required>

非常简单明了，除了在我的情况下，我创建了一个question-shell组件，通过根据ngIf字段在模板中触发template条件来处理我所有不同类型的问题在我的数据中，所以我的文本输入看起来像这样。

<!-- SMALL TEXT INPUT -->
<ng-container *ngIf="Data.template == 'sm_input'">

    <fieldset class="col-xs-12 col-sm-6 col-md-4">

        <label class="form-group center-block">
            <input class="form-control" type="hidden" [attr.value]="Data.question">
            {{Data.question}}:
            <input class="form-control"
                [attr.id]="Data.id"
                [attr.name]="Data.name"
                [(ngModel)]="UserResponse.answer"
            >
        </label>

    </fieldset>

</ng-container>

由于我的组件的性质，我无法添加

ngModel
#email="ngModel"

我的输入作为一个整体，因为它将用于姓名，电话号码，网站等。除此之外，如果我有一堆具有相同名称的元素在我猜测他们＆＃39; ll所有这些只是重新定义了整个表格上的相同属性，给我不完整的结果。

到目前为止，表单的设置方式如下

questionnaire template

<form #branding="ngForm" (ngSubmit)="onSubmit(branding)" class="col-xs-12">
    <ng-container *ngFor="let a of Data?.sections">
        <question-shell *ngFor="let b of a.questions" [Data]="b"></question-shell>
    </ng-container>

    <button type="submit" class="btn">Submit</button>

</form>

然后question-shell有不同的html块，就像我上面给出的数据绑定的例子一样。有没有办法可以在我的数据中存储一个值，我可以用它来动态创建它？这是一个吸烟者，请原谅自行车无法正常工作。提前谢谢。

Answer 1

以下方法我已经习惯将名称和禁用属性绑定到我的动态模板，在您的情况下，这可能会因ngModel而异，但可以参考

// question-shell.component.ts
export class question-shell implements OnInit {
  @Input() nmgModel: any;
}
// question-shell.component.html
<ng-container *ngIf="Data.template == 'sm_input'">

    <fieldset class="col-xs-12 col-sm-6 col-md-4">

        <label class="form-group center-block">
            <input class="form-control" type="hidden" [attr.value]="Data.question">
            {{Data.question}}:
            <input class="form-control"
                [attr.id]="Data.id"
                [attr.name]="Data.name"
                [(ngModel)]="{{nmgModel}}"
            >
        </label>

    </fieldset>

</ng-container>

// questionnaire template
<form #branding="ngForm" (ngSubmit)="onSubmit(branding)" class="col-xs-12">
    <ng-container *ngFor="let a of Data?.sections">
        <question-shell *ngFor="let b of a.questions" [Data]="b" [ngModel]="value"></question-shell>
    </ng-container>

    <button type="submit" class="btn">Submit</button>

</form>

我如何申请＆＃34; ngModel #something =＆＃34; ngModel＆＃34;＆＃34;到模板驱动形式的动态表单元素？

1 个答案: