Question

下面是角度6 中的模板驱动形式的示例，该示例是动态的，可以是任意数量的形式。因此，我不想在类[(ngModel)]="anyVariable"中创建和使用变量。如果我以value="Rakesh"的形式填写，则不会显示。

那么，如何设置firstName和lastName输入的默认值？

<form #paxForm="ngForm" name="passengerForm" novalidate>

    <label>First name*</label>
    <input type="text" value="Rakesh" name="firstName" ngModel/>

    <label>Last name*</label>
    <input type="text" value="" name="lastName" ngModel required/>

    <label>Mobile number*</label>
    <input type="tel" name="mobileNumber" value="" ngModel required/>

    <input type="button" value="Submit" (click)="submitPaxForm(paxForm)"/>
</form>

返回值：

paxForm:{
    value:{
        mobileNumber: "97987987",
        firstName: "rakesh",
        lastName: "pal"
    }
}

Answer 1

就这么简单

<input type="text" name="firstName" ngModel="Rakesh"/>

https://stackblitz.com/edit/so-53517039

Answer 2

我通过中继两种方式的数据绑定进行了类似的操作，因此我很容易获得所有表单值

考虑此示例

AppComponent

  formsValues=[
    {
        mobileNumber: "97987987",
        firstName: "rakesh",
        lastName: "pal"
    } , 
    {
        mobileNumber: "2233556",
        firstName: "sam",
        lastName: "well"
    }
  ]

模板

<div *ngFor="let frm of  formsValues" class="form">
    <label>First name*</label>
    <input type="text" value="Rakesh" name="firstName" [(ngModel)]="frm.firstName"/>

    <label>Last name*</label>
    <input type="text" value="" name="lastName" [(ngModel)]="frm.lastName" required/>

    <label>Mobile number*</label>
    <input type="tel" name="mobileNumber" value="" [(ngModel)]="frm.mobileNumber" required/>
    <input type="button" value="Submit" (click)="submitPaxForm(frm)"/>
</div>

demo stackblitz

但是我认为反应形式数组对于您的情况要好得多

Answer 3

我遇到了类似的问题。通过直接将默认值分配给 ngModel 来修复它。

示例：

'<form  #userData="ngForm" (ngSubmit)="getData(userData.value)">
     <div class="fields">
     <label>Building</label><input class="form-control" type="text" id='building' 
     name='building' ngModel='1234'>
     <label>Floor</label><input class="form-control" type='text' id='floor' 
     name='floor' ngModel='2'>
     </div>
     <button type="submit">Submit</button>
     </form>'

如何在动态模板驱动的表单的输入中添加默认值

3 个答案: