Angular 角度值未设置输入字段值

我试图使用

patchValue（）

通过表单组设置输入值，但输入仍然为空，这是我的代码示例

component.html

---

将值从

localStorage

传递到表单上的

输入字段

的正确方法是什么？

从本地存储获取值后，您需要这样设置值

试试这个-

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(public fb: FormBuilder, private storeSrv: StoreService, private router: Router) { }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

    this.createStoreForm = this.fb.group({
      'user': [this.userId.id, Validators.required],
    });
 }
}

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" formControl="user" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>

导出类storeProfileComponent实现OnInit{
storeProfile:any={}；
userData:any={}；
userId:any；
createStoreForm:FormGroup；
FormSubmitTest：布尔值；
构造函数（公共fb:FormBuilder，私有storeSrv:StoreService，私有路由器：路由器）{}
恩戈尼尼特（）{
让tempUser=localStorage.getItem（'user'）；
如果（临时用户）{
this.userData=JSON.parse（tempUser）；
this.userId=this.userData.id；
};
this.createStoreForm=this.fb.group({
“用户”：[this.userId.id，Validators.required]，
});
}
}
唯一用户ID
商店用户是必需的

只需删除ngModel并使用createStoreForm.value从值中获取

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" [formControl]="createStoreForm.controls['user']" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(fb: FormBuilder, private storeSrv: StoreService, private router: Router) {
    this.createStoreForm = fb.group({
      'user': ['', Validators.required],
    });
  }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

  this.createStoreForm.patchValue({
    'user': this.userId.id,  
  });
 }

 public createStore(){
  console.log(this.createStoreForm.value); // get from values 
 }
}

唯一用户ID
商店用户是必需的
导出类storeProfileComponent实现OnInit{
storeProfile:any={}；
userData:any={}；
userId:any；
createStoreForm:FormGroup；
FormSubmitTest：布尔值；
构造器（fb:FormBuilder、专用存储SRV:StoreService、专用路由器：路由器）{
this.createStoreForm=fb.group({
“用户”：[“”，验证器。必需]，
});
}
恩戈尼尼特（）{
让tempUser=localStorage.getItem（'user'）；
如果（临时用户）{
this.userData=JSON.parse（tempUser）；
this.userId=this.userData.id；
};
this.createStoreForm.patchValue({
“用户”：this.userId.id，
});
}
公共createStore（）{
console.log（this.createStoreForm.value）；//从值中获取
}
}

首先设置

this.userId=this.userData.id

，然后再次使用

this.userId.id

设置表单。这是有效的

this.userData.id.id

。你确定这是正确的吗？谢谢你的注意，你是对的，但是改变了它并没有解决问题@deezgerror在此处抛出

this.createStoreForm=fb.group（{'user'：[this.userId.id，Validators.required]}）

找不到名称fb

opps！！只是忘了添加

此

，请尝试我的更新答案。是的，我已经尝试过了，错误是

属性“fb”在类型“StoreProfileComponent”上不存在。

：（谢谢，您的解决方案已将用户ID重新提交到视图中，但在提交时，它已被提交，且未与表单一起提交。）@Muhammad@CE0我只是更新了我的答案，关于如何从submitNow上获取from值，谢谢。传递

this.createStoreForm.value

是正确的。

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(public fb: FormBuilder, private storeSrv: StoreService, private router: Router) { }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

    this.createStoreForm = this.fb.group({
      'user': [this.userId.id, Validators.required],
    });
 }
}

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" formControl="user" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>

<form [formGroup]="createStoreForm" (ngSubmit)="createStore()" novalidate>
  <label for="user">Unique User ID</label>
    <input type="text" name="user" class="form-control" [formControl]="createStoreForm.controls['user']" readonly>
    <div *ngIf="createStoreForm.controls['user'].hasError('required') && formSubmitAttempt" class="form-error">Store user is required</div>
</form>

export class storeProfileComponent implements OnInit {
  storeProfile: any = {};
  userData: any = {};
  userId: any;
  createStoreForm: FormGroup;
  formSubmitAttempt: boolean;

  constructor(fb: FormBuilder, private storeSrv: StoreService, private router: Router) {
    this.createStoreForm = fb.group({
      'user': ['', Validators.required],
    });
  }

  ngOnInit() {
    let tempUser = localStorage.getItem('user');
    if (tempUser) {
      this.userData = JSON.parse(tempUser);
      this.userId = this.userData.id;
    };

  this.createStoreForm.patchValue({
    'user': this.userId.id,  
  });
 }

 public createStore(){
  console.log(this.createStoreForm.value); // get from values 
 }
}