标签: ngmodel

我想在更改模型对象后设置光标位置，但它实际上尝试在更新文本框的值之前设置光标位置。

HTML：

    <input type="text" name="test" id="test" [(ngModel)]="myString">
    <button type="button" (click)="updateText('testStr')">

TS：

    myTextBox: HTMLInputElement;

    ngOnInit() {
    this.myTextBox = document.getElementById('test');
    }

    updateText(str:String){
    this.myString+=str;
    this.myTextBox.focus();
    this.myTextBox.setSelectionRange(2,2);
    }

这样，因为它尝试在实际更新文本之前设置光标位置，所以它只能focus(). 但是，如果我没有将任何内容绑定到文本框并通过执行this.myTextBox.setAttribute('value',str);然后focus()调用它来更新其文本，setSelectionRange那么它就可以工作。我应该怎么办？

我有一个数字类型输入,当我尝试使用onChange事件更改值时,它不起作用.

我已尝试相同的文本输入,它的工作完美.

<input
   type="number"
   [(ngModel)]="element.value" 
   (change)="onChange($event)"
   >

export class NumFieldComponent {
    @Input() index;
    @Input() element; //element.value = 0

    onChange($event){

        var confirm = confirm("Are you sure about this?")

        if(confirm){
            //True, accept the value
        } else {
            this.element.value = 0;
            //Failed, set the input back to 0
        }
    }
}

我是Angular2的新手,所以我在这里缺少什么？

PS.我看到类似的问题,输入采取bool

<input class="form-control" [(ngModel)]="valami.Price">

你好！在这种情况下，有没有简单的方法来格式化数字？

例如，现在它显示 1000。目标是显示 1 000.00 我知道在 ngModel 中不允许使用管道，所以

{{valami.Price | 数量：3.2-2}}

不在这里工作。

第二个问题是如何更换千位分隔符？默认值是 ',' 我想更改为 ' '。我应该在组件中编写一个转换函数，还是有任何简单的方法可以做到这一点？

谢谢

使用 Angular 4，我尝试将值设置为“日期”类型的输入，但我无法做到。我的领域的结构如下：

<input 
    type="date"
    class="form-control"                        
    ([ngModel])="edt_object.list_changedate" 
    (ngModelChange)="edt_object.list_changedate = $event"
    formControlName="list_changedate"
    name="list_changedate"
    id="list_changedate"
    style="width: 228px!important">

我尝试设置该值的 Typescript 代码如下：

this.edt_object.list_changedate = this.lista_selected.list_changedate

然而，什么也没有发生。当我使用 jQuery 分配值时（是的，同时使用 Angular 和 jQuery）它确实有效，但是，当我尝试使用 Angular 验证该字段时，该字段的状态为“无效”，因为 Angular 没有任何价值。我该怎么办？

如何在多选中设置默认选定值。我从数据库中获取current_options和all_options我想更新current_options并再次发送新值做数据库。

更新数据库有效，但当我刷新页面时，没有选择任何选项。

current_options = [{id:1, name:'name1'}];                    #from database
all_options = [{id:1, name:'name1'},{id:2, name:'name2'}];   #from database

我的模板：

<select multiple name="type" [(ngModel)]="current_options">
    <option  *ngFor="let option of all_options" [ngValue] = "option">
        {{option.name}}
    </option>
</select>`

我正在使用 Angular 编写第一个组件测试，但在使 ngModel 绑定工作时遇到一些困难。这是我的测试模块定义：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        LdapLoginComponent,
      ],
      imports: [
        CommonModule,
        FormsModule,
        NoopAnimationsModule,
        MatInputModule,
        MatFormFieldModule,
        RouterTestingModule,
      ],
      providers: [
        {
          provide: AuthorizationService,
          useValue: { login() {} },
        },
      ]
    }).compileComponents();
  }));

这是我的测试用例：

it('should bind form fields with class', fakeAsync(() => {
    // Given
    const username = 'username';
    const password = 'password';
    const usernameField = de.query(By.css('input[name=username]')).nativeElement;
    const passwordField = de.query(By.css('input[name=password]')).nativeElement;

    // When
    usernameField.value = username;
    passwordField.value = password;
    usernameField.dispatchEvent(new Event('input'));
    passwordField.dispatchEvent(new Event('input'));
    tick();
    fixture.detectChanges();

    // Then …

我有一个 Angular4 应用程序，它从表单中捕获数据并存储在 DynamoDB 中。它使用 ngModel 支持双向数据绑定，并且在显示器上看起来都不错。由于输入字段键入为绑定到 Typescript 的“数字”字段的“文本”，因此出现问题。似乎正在将对象值的类型更改为“字符串”。我会简单地将 HTML 输入类型更改为“数字”，除了表单字段上不必要和不需要的增量/减量装饰器（隐藏它们似乎支持有限）。所以我很好奇是否有另一种方法可以保持数据结构按需要输入……如果这是 ngModel 中的错误……或者输入类型只需要是“数字”。

我的 sample.component.ts 文件中的结构如下所示：

export class Course {
  Id: number;
  Name: string;
}
...
courseInstance: Course;

saveCourse() {
    JSON.stringify(this.courseInstance);
}

我的 sample.component.html 文件如下所示：

<div>
  <label for="courseid">Course ID: </label>
  <input type="text" class="form-control"[(ngModel)]="courseInstance.Id" name="courseid">
</div>
<div>
  <label for="courseName">Course Name: </label>
  <input type="text"  class="form-control"[(ngModel)]="courseInstance.Name" name="courseName">
</div>
<div>
  <button type="button" class="btn btn-info btn-lg" (click)="saveCourse()">Save</button>
</div>

JSON.stringify(this.courseInstance) 的输出结果类似于

{"Id":"100","Name":"Test course"}

请注意表示为字符串的值 100。

如果我不使用表单，而只是创建一个实例，例如

courseInstance: Course = {
  Id: 100,
  Name: 'Test course'
}; …

我有一个对象叫做user：

let user = {};

如何将输入绑定到未定义的属性？例如

<input [(ngModel)]="user.name" placeholder="Enter your name"></input>

每当用户输入他的名字时，我都希望ngModel创建该对象的 undefined 属性并导致：

user = {name: "John"};

这是否也可以在更深层次上完成？例如

<input [(ngModel)]="user.homeaddress.postcode" placeholder="Enter your post code"></input>

以导致：

user = {name: "John", homeaddress: {postcode: "E20 1QS"}};

我知道有类似的问题，但没有一个涵盖Angular 5的方法，或者至少没有以我理解的方式涵盖。

对于我的图像上传系统，我需要知道是否在输入标签上附加了图片以及文件的名称。这是我的代码：

HTML：

<input 
  type="file" 
  [(ngModel)]="currentInput"
  (change)="onFileSelected($event)"
>

角度：

export class ImageUpload {
    currentInput;

    onFileSelected(event) {
        console.log(this.currentInput);
    }
}

无论是否附加文件，“ currentInput”中的值始终是不确定的。当类型等于“文件”时，如何处理输入？

谢谢！

假设我有一个数组[1,2,3]。我想迭代所有项目并将每个项目绑定到ngModel。当我在更改第一个元素后运行此代码时，第二个元素获得相同的值。有什么问题？

<div *ngFor="let x of array; let i = index;">
    <input type="number" [(ngModel)]="x[i]">
</div>