如何从 angular 的模板驱动形式访问默认值

Question

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

表格.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>

表格.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);

}

表格.model

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

    export class myModel{

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


    }

Answer 1

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

表格.html

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

表格.ts

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