Angular2 RC6 disabled input

问题:

Previously in my Angular2 RC5 app I had an input element like the following:

<input type="text" formControlName="blah" disabled/>

The intent was to make this field non-editable by the user when in edit mode; hence the disabled attribute.

After upgrading to Angular2 RC6 I'm getting the following message in the console:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

Example:

form = new FormGroup({
   first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
   last: new FormControl('Drew', Validators.required)
});

However, if I follow this advice, removing my disabled attribute and replacing my FormControl with disabled set to true, then that field does not post on submission (i.e. it does not appear in form.value).

Have I coded this situation incorrectly? Is there a way for a FormControl that is disabled to be included in the forms values?

As a side note I'm actually using FormBuilder opposed to setting up each individual FormControl if that makes a difference.

回答1:

The correct answer as of Angular 2.4.1 and using the FormBuilder like you are

form: FormGroup;

constructor(private fb: FormBuilder) {

}

ngOnInit() {
    this.form = this.fb.group({
      blah: [{ value: '', disabled: true }]
});

and you can turn it on by calling

this.form.get("blah").enable();

or off by calling

this.form.get("blah").disable();

However, browsers should not allow submitting elements that are disabled. This popular question has some more information on that values of disabled inputs will not be submited?

There are various hacks and workarounds that people have come up with to avoid this such as hidden input fields, the readonly attribute, or enabling the fields before submitting.

回答2:

Instead of the disabled attribute in a template , you can set the ' disabled ' instance FormControl to 'true '.

blah: FormControl = new FormControl({value: 'text', disabled: true});

or

blah: FormControl = new FormControl('text');
blah.disabled = true;

回答3:

You can try to use readonly attribute in your input: <input type="text" [readonly]="true" />

回答4:

You need to use getRawValue()

see: Disabled input validation in dynamic form

https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html#!#getRawValue-anchor

If you'd like to include all values regardless of disabled status, use this method. Otherwise, the value property is the best way to get the value of the group.

回答5:

I'm ok with this code.if you want to disable this.userForm.controls['UserID'].disable({ onlySelf: true }); if you want to enable
this.userForm.controls['UserID'].enable({ onlySelf: false });

回答6:

Here is the trick: this.form.getRawValue();, no need to change your for model.

In your component get the value by usein getRawValue and it will return values for disabled controls as well.

Here is my save method to test:

save() {       
    let data = this.form.getRawValue();
    if (!this.form.valid)
        return;
    ...................
    ...................
}

For more information see the last two paragraph on the page

回答7:

You can get it like this,

In template:

<[disabled]="state"/>

In component:

 state:any = true;