Angular2形式输入保持不变

我改变建这样的用户密码的angular2形式（我删除了所有不需要的元素）：Angular2形式输入保持不变

<form id="update-user-password-form" 
    [formGroup]="userPasswordFormGroup" 
    (ngSubmit)="changeUserPassword()"> 

    <div> 
     <input id="password" 
      type="password" 
      name="password" 
      [(ngModel)]="model.password" 
      #password="ngModel"/> 
     <label for="password">Password</label> 
    </div> 

    <div ngModelGroup="newPasswordsGroup"> 

     <div> 
     <input id="new-password" 
       type="password" 
       name="newPassword" 
       [(ngModel)]="model.newPassword" 
       #newPassword="ngModel"/> 
     <label for="new-password">New Password</label> 
     </div> 

     <div> 
     <input id="repeat-password" 
       type="password" 
       name="newPasswordRepeated" 
       [(ngModel)]="model.newPasswordRepeated" 
       #newPasswordRepeated="ngModel"/> 
     <label for="repeat-password">Repeat the new password</label> 
     </div> 

    </div> 

    <button type="submit" 
      class="submit-button" 
      [disabled]="!userPasswordFormGroup.valid" 
      [ngClass]="{ disabled: !userPasswordFormGroup.valid }"> 
     Change 
    </button> 

</form>

和组件：

@Component({ 
    selector: 'change-user-password', 
    template: require('./changeUserPassword.component.html'), 
    styles: [require('./changeUserPassword.component.scss')], 
    directives: [REACTIVE_FORM_DIRECTIVES], 
    providers: [FormBuilder] 
}) 
export class ChangeUserPasswordComponent implements OnInit { 
    ... 
    public model: EditUserPasswordModel; 
    public newPasswordsGroup: FormGroup; 
    public userPasswordFormGroup: FormGroup; 
    public updateUserPasswordError: any; 
    public isPasswordUpdated: boolean; 
    public isUpdatingPassword: boolean; 

    ... 

    public ngOnInit(): void { 
     ... 
     this._createEmptyForm(); 
    } 
    ... 

    private _createEmptyForm(): void { 
     this.newPasswordsGroup = this.formBuilder.group({ 
      newPassword: ['', Validators.required], 
      newPasswordRepeated: ['', Validators.required] 
     }, { 
      validator: EqualFieldsValidator.allFieldsEqual 
      }); 

     this.userPasswordFormGroup = this.formBuilder.group({ 
      password: ['', Validators.required], 
      newPasswordsGroup: this.newPasswordsGroup 
     }); 
    } 

    ... 
}

的问题是当我在输入字段中键入内容时，它们不会失效并保留untouched。这个工作对我来说，我认为它停止工作，我更新了我的@angular库后... 有趣的是，我有另一种形式不使用formBuilder有它工作得很好......

是它在新的角度形式的错误，或者我在这里想念什么？

来源

2016-07-30 Slava Shpitalny

我已经找到了问题，因为最后的升级需要，如果你使用表单生成像这样使用formControlName：

<input id="password" 
     type="password" 
     formControlName="password" 
     [(ngModel)]="model.password"/>

相反的：

<input id="password" 
     type="password" 
     name="password" 
     [(ngModel)]="model.password" 
     #password="ngModel"/>

的原因是什么呢创建FromControl这是不一样的以前的方式

我在这个问题中找到答案： Angular 2 - Inject ngModel in custom directive when html field has formControlName

来源

2016-07-30 14:44:11

Angular2形式输入保持不变

回答

相关问题