我已经安装了vue-cli 3.5.5。当我跑步时vue create myapp,它显示消息Update available 3.6.2。
Vue CLI v3.5.5
?????????????????????????????
? Update available: 3.6.2 ?
?????????????????????????????
Run Code Online (Sandbox Code Playgroud)
如何将vue-cli升级到最新版本?
运行时,npm i -g vue-cli它将安装vue-cli版本2.9.6,而不是升级现有的vue cli版本。
作业系统:Ubuntu 18.04.1。
节点版本:10.15.3。
nvm版本:0.34.0。
我只想在表单输入更改时启用表单中的提交按钮。
在提交时,窗体控件值不改变按钮应被禁用。
我尝试使用FormGroup.pristine标志来启用/禁用提交按钮。
它适用于启用按钮。
但是,true当 UI 中的值更改回其原始值时,它不会重置。
组件代码:
import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-registration-form',
templateUrl: './registration-form.component.html',
styleUrls: ['./registration-form.component.scss']
})
export class RegistrationFormComponent {
public registrationForm;
public formValues = {
gender: 1,
};
constructor(private formBuilder: FormBuilder) {
this.registrationForm = formBuilder.group(this.formValues);
}
onSubmit(formData) {
console.log('Your form is submitted', formData);
this.registrationForm.reset(this.formValues);
}
}
Run Code Online (Sandbox Code Playgroud)
<form class="registration-form" [formGroup]="registrationForm" (ngSubmit)="onSubmit(registrationForm.value)">
<div>
<label for="gender">Gender</label>
<select id="gender" formControlName="gender">
<option …Run Code Online (Sandbox Code Playgroud) 我有一个带有多个复选框、下拉菜单和一个保存按钮的组件。这是一个简化的示例组件模板:
<aside class="container">
<div class="row">
<input
type="checkbox"
id="all-users"
[(ngModel)]="showAllUsers"
(ngModelChange)="onChange($event)"
/>
<label for="all-users">Show all users</label>
</div>
<div class="row">
<ng-select
[(ngModel)]="selectedUser"
[clearable]="false"
appendTo="body"
(change)="onChange($event)"
>
<ng-option *ngFor="let user of activeUsers" [value]="user">{{ user }}</ng-option>
</ng-select>
</div>
<div class="row">
<button type="button" class="btn btn-primary" [disabled]="!dirty" (click)="onSave()">
Save Changes
</button>
</div>
</aside>
Run Code Online (Sandbox Code Playgroud)
我想Save Changes仅在用户进行更改时启用该按钮,无论是通过取消选中复选框还是更改下拉框中的选择。
现在,我在组件中的每个控件(onChange上例中的函数)上注册了一个事件处理程序,并使用一个dirty标志来禁用或启用Save Changes按钮。
这是上述模板的 component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.css']
})
export class FilterComponent implements …Run Code Online (Sandbox Code Playgroud)