如何从模板驱动的角度形式访问默认值答案

【问题标题】：How to access default value from template driven form of angular如何从模板驱动的角度形式访问默认值
【发布时间】：2020-01-21 03:34:44
【问题描述】：

我已经创建了一个模板驱动的 Angular 表单。在一个输入字段的那种形式中，我从另一个组件中获得了价值。我已将该值分配给输入字段。我也创建了模型。现在我需要在单击确定按钮后访问该值。在控制台中，我得到了空值。如何获得该动态值。请帮忙

form.html

    <form name="form" #f="ngForm" class="form-horizontal">



         <div class="form-row">

            <label>Remaining qty: &nbsp;&nbsp;</label>

           <div class="form-group col-md-3">
             <input type="text" [value]="myValue"  class="form-control" [(ngModel)]="myModel.modelValue.value"  name="modelValue" readonly>
          </div>
        </div> 

  <button type="button" class="btn btn-primary" (click)="submit()">OK</button>
    </form>

form.ts

import { Component, OnInit ,Input} from '@angular/core';
import { MyModel } from './myModel.model';


@Component({
  selector: 'app-form,
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {

    constructor(){
    }

  myModel: MyModel= new MyModel();
   rowData:any;

  @Input() myValue:any;


  ngOnInit() {
  }


  submit(){

    console.log(this.myModel);

}

form.model

import { BasicSearchModelI, BasicSearchKey } from '../base';

    export class myModel{

          modelValue: BasicSearchModelI = {
                value: '',
                apiKey: 'modelValue'
          };


    }

【问题讨论】：

标签： angular

【解决方案1】：

您正在分配值属性以及进行两种方式绑定，这将不起作用。而不是这个，您可以在ngOnInit() 方法中的myModel.modelValue.value 对象中分配myValue，并且只需进行两种方式绑定，如下所示

form.html

<input type="text" class="form-control" [(ngModel)]="myModel.modelValue.value" name="modelValue" readonly>

form.ts

ngOnInit()
{
     myModel.modelValue.value = myValue;
}

【讨论】：